<html class="panel-fit">

<head>
    <title>启迪之星审批系统</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <script type="text/javascript" src="head.js"></script>
    <link id="themes" rel="stylesheet" type="text/css" href="/system/jquery/themes/themes1/easyui.css">
    <link rel="stylesheet" type="text/css" href="/system/jquery/themes/themes1/icon.css">
    <link rel="stylesheet" type="text/css" href="/system/jquery/themes/themes1/icons.css">
    <script type="text/javascript" src="/system/jquery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/system/jquery/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/system/jquery/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/system/js/jquery-common.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/system/css/css.css">
    <script type="text/javascript" src="/system/js/appjs/myJs.js"></script>
    <script type="text/javascript" src="/system/js/appjs/base_crud.js"></script>
    <script type="text/javascript" src="/system/js/appjs/popedom.js"></script>
    <script type="text/javascript" src="/system/js/calendar/WdatePicker.js"></script>
    <link href="http://59.110.7.147:8088/system/js/calendar/skin/WdatePicker.css" rel="stylesheet" type="text/css">
    <link rel="shortcut Icon" href="/system/images/logo.ico" type="image/x-icon">
    <link rel="bookmark " href="/system/images/logo.ico" type="image/x-icon">
    <script type="text/javascript" src="/system/js/underscore-min.js"></script>
    <script type="text/javascript" src="/system/js/backbone-min.js"></script>
    <script type="text/javascript" src="/system/js/jquery.easyui.common.js"></script>
    <script type="text/javascript" src="/system/js/appjs/base_mvc.js"></script>
    <script type="text/javascript" src="/system/js/affix/easyUpload.js"></script>
    <script type="text/javascript" src="js/appjs/formatTree.js"></script>
    <script src="/createJsessionId"></script>
    <style type="text/css">
        .panel-header {
            background-color: #dadada;
            background: -webkit-linear-gradient(top, #dadada 0, #dadada 100%);
            background: -moz-linear-gradient(top, #dadada 0, #E0ECFF 100%);
            background: -o-linear-gradient(top, #dadada 0, #E0ECFF 100%);
            background: linear-gradient(to bottom, #dadada 0, #dadada 100%);
            background-repeat: repeat-x;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#dadada,
                    endColorstr=#dadada, GradientType=0);
        }

        #upPass input {
            height: 23px;
            padding: 0px 3px;
            line-height: 15px;
            font-size: 14px;
            color: #999999;
            background-color: #FFFFFF;
            border: 1px #dfdfdf solid;
            vertical-align: middle;
            outline: none;
        }
    </style>


    <style data-id="immersive-translate-input-injected-css">
        .immersive-translate-input {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 2147483647;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .immersive-translate-attach-loading::after {
            content: " ";

            --loading-color: #f78fb6;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            display: block;
            margin: 12px auto;
            position: relative;
            color: white;
            left: -100px;
            box-sizing: border-box;
            animation: immersiveTranslateShadowRolling 1.5s linear infinite;

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-2000%, -50%);
            z-index: 100;
        }

        .immersive-translate-loading-spinner {
            vertical-align: middle !important;
            width: 10px !important;
            height: 10px !important;
            display: inline-block !important;
            margin: 0 4px !important;
            border: 2px rgba(221, 244, 255, 0.6) solid !important;
            border-top: 2px rgba(0, 0, 0, 0.375) solid !important;
            border-left: 2px rgba(0, 0, 0, 0.375) solid !important;
            border-radius: 50% !important;
            padding: 0 !important;
            -webkit-animation: immersive-translate-loading-animation 0.6s infinite linear !important;
            animation: immersive-translate-loading-animation 0.6s infinite linear !important;
        }

        @-webkit-keyframes immersive-translate-loading-animation {
            from {
                -webkit-transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(359deg);
            }
        }

        @keyframes immersive-translate-loading-animation {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(359deg);
            }
        }

        .immersive-translate-input-loading {
            --loading-color: #f78fb6;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            display: block;
            margin: 12px auto;
            position: relative;
            color: white;
            left: -100px;
            box-sizing: border-box;
            animation: immersiveTranslateShadowRolling 1.5s linear infinite;
        }

        @keyframes immersiveTranslateShadowRolling {
            0% {
                box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
                    0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
            }

            12% {
                box-shadow: 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0),
                    0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
            }

            25% {
                box-shadow: 110px 0 var(--loading-color), 100px 0 var(--loading-color),
                    0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
            }

            36% {
                box-shadow: 120px 0 var(--loading-color), 110px 0 var(--loading-color),
                    100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0);
            }

            50% {
                box-shadow: 130px 0 var(--loading-color), 120px 0 var(--loading-color),
                    110px 0 var(--loading-color), 100px 0 var(--loading-color);
            }

            62% {
                box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color),
                    120px 0 var(--loading-color), 110px 0 var(--loading-color);
            }

            75% {
                box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
                    130px 0 var(--loading-color), 120px 0 var(--loading-color);
            }

            87% {
                box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
                    200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color);
            }

            100% {
                box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
                    200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
            }
        }

        .immersive-translate-toast {
            display: flex;
            position: fixed;
            z-index: 2147483647;
            left: 0;
            right: 0;
            top: 1%;
            width: fit-content;
            padding: 12px 20px;
            margin: auto;
            overflow: auto;
            background: #fef6f9;
            box-shadow: 0px 4px 10px 0px rgba(0, 10, 30, 0.06);
            font-size: 15px;
            border-radius: 8px;
            color: #333;
        }

        .immersive-translate-toast-content {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .immersive-translate-toast-hidden {
            margin: 0 20px 0 72px;
            text-decoration: underline;
            cursor: pointer;
        }

        .immersive-translate-toast-close {
            color: #666666;
            font-size: 20px;
            font-weight: bold;
            padding: 0 10px;
            cursor: pointer;
        }

        @media screen and (max-width: 768px) {
            .immersive-translate-toast {
                top: 0;
                padding: 12px 0px 0 10px;
            }

            .immersive-translate-toast-content {
                flex-direction: column;
                text-align: center;
            }

            .immersive-translate-toast-hidden {
                margin: 10px auto;
            }
        }

        .immersive-translate-dialog {
            position: fixed;
            z-index: 2147483647;
            left: 0;
            top: 0;
            display: flex;
            width: 300px;
            flex-direction: column;
            align-items: center;
            font-size: 15px;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            height: fit-content;
            border-radius: 20px;
            background-color: #fff;
        }

        .immersive-translate-modal {
            display: none;
            position: fixed;
            z-index: 2147483647;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
            font-size: 15px;
        }

        .immersive-translate-modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 40px 24px 24px;
            border-radius: 12px;
            width: 350px;
            font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
                "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
                "Segoe UI Symbol", "Noto Color Emoji";
            position: relative;
        }

        @media screen and (max-width: 768px) {
            .immersive-translate-modal-content {
                margin: 25% auto !important;
            }
        }

        @media screen and (max-width: 480px) {
            .immersive-translate-modal-content {
                width: 80vw !important;
                margin: 20vh auto !important;
                padding: 20px 12px 12px !important;
            }

            .immersive-translate-modal-title {
                font-size: 14px !important;
            }

            .immersive-translate-modal-body {
                font-size: 13px !important;
                max-height: 60vh !important;
            }

            .immersive-translate-btn {
                font-size: 13px !important;
                padding: 8px 16px !important;
                margin: 0 4px !important;
            }

            .immersive-translate-modal-footer {
                gap: 6px !important;
                margin-top: 16px !important;
            }
        }

        .immersive-translate-modal .immersive-translate-modal-content-in-input {
            max-width: 500px;
        }

        .immersive-translate-modal-content-in-input .immersive-translate-modal-body {
            text-align: left;
            max-height: unset;
        }

        .immersive-translate-modal-title {
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            color: #333333;
        }

        .immersive-translate-modal-body {
            text-align: center;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            margin-top: 24px;
            word-break: break-all;
        }

        @media screen and (max-width: 768px) {
            .immersive-translate-modal-body {
                max-height: 250px;
                overflow-y: auto;
            }
        }

        .immersive-translate-close {
            color: #666666;
            position: absolute;
            right: 16px;
            top: 16px;
            font-size: 20px;
            font-weight: bold;
        }

        .immersive-translate-close:hover,
        .immersive-translate-close:focus {
            text-decoration: none;
            cursor: pointer;
        }

        .immersive-translate-modal-footer {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 24px;
        }

        .immersive-translate-btn {
            width: fit-content;
            color: #fff;
            background-color: #ea4c89;
            border: none;
            font-size: 14px;
            margin: 0 8px;
            padding: 9px 30px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .immersive-translate-btn-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .immersive-translate-btn:hover {
            background-color: #f082ac;
        }

        .immersive-translate-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .immersive-translate-btn:disabled:hover {
            background-color: #ea4c89;
        }

        .immersive-translate-link-btn {
            background-color: transparent;
            color: #ea4c89;
            border: none;
            cursor: pointer;
            height: 30px;
            line-height: 30px;
        }

        .immersive-translate-cancel-btn {
            /* gray color */
            background-color: rgb(89, 107, 120);
        }

        .immersive-translate-cancel-btn:hover {
            background-color: hsl(205, 20%, 32%);
        }

        .immersive-translate-action-btn {
            background-color: transparent;
            color: #ea4c89;
            border: 1px solid #ea4c89;
        }

        .immersive-translate-btn svg {
            margin-right: 5px;
        }

        .immersive-translate-link {
            cursor: pointer;
            user-select: none;
            -webkit-user-drag: none;
            text-decoration: none;
            color: #ea4c89;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        }

        .immersive-translate-primary-link {
            cursor: pointer;
            user-select: none;
            -webkit-user-drag: none;
            text-decoration: none;
            color: #ea4c89;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        }

        .immersive-translate-modal input[type="radio"] {
            margin: 0 6px;
            cursor: pointer;
        }

        .immersive-translate-modal label {
            cursor: pointer;
        }

        .immersive-translate-close-action {
            position: absolute;
            top: 2px;
            right: 0px;
            cursor: pointer;
        }

        .imt-image-status {
            background-color: rgba(0, 0, 0, 0.5) !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 16px !important;
        }

        .imt-image-status img,
        .imt-image-status svg,
        .imt-img-loading {
            width: 28px !important;
            height: 28px !important;
            margin: 0 0 8px 0 !important;
            min-height: 28px !important;
            min-width: 28px !important;
            position: relative !important;
        }

        .imt-img-loading {
            background-image: url("");
            background-size: 28px 28px;
            animation: image-loading-rotate 1s linear infinite !important;
        }

        .imt-image-status span {
            color: var(--bg-2, #fff) !important;
            font-size: 14px !important;
            line-height: 14px !important;
            font-weight: 500 !important;
            font-family: "PingFang SC", Arial, sans-serif !important;
        }

        .imt-primary-button {
            display: flex;
            padding: 12px 80px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            border-radius: 8px;
            background: #ea4c89;
            color: #fff;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 24px;
            border: none;
            cursor: pointer;
        }

        .imt-retry-text {
            color: #999;
            text-align: center;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            cursor: pointer;
        }

        .imt-action-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .imt-modal-content-text {
            text-align: left;
            color: #333;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
        }

        @keyframes image-loading-rotate {
            from {
                transform: rotate(360deg);
            }

            to {
                transform: rotate(0deg);
            }
        }

        .imt-linear-gradient-text {
            background: linear-gradient(90deg, #00a6ff 0%, #c369ff 52.4%, #ff4590 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .imt-flex-center {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .imt-linear-black-btn {
            border-radius: 50px;
            background: linear-gradient(66deg, #222 19%, #696969 94.25%);
            height: 48px;
            width: 100%;
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            display: flex;
            align-items: center;
            cursor: pointer;
            justify-content: center;
        }
    </style>
</head>

<body class="easyui-layout layout">
    <!-- top div -->
    <div class="panel layout-panel layout-panel-north" style="left: 0px; top: 0px; width: 981px;">
        <div region="north" class="header-easy panel-body panel-body-noheader panel-body-noborder layout-body"
            border="fasle" title="" style="width: 981px; height: 50px;">
            <div class="max-logo"></div>
            <div id="logout" class="logout">
                <span>[shupa,舒沛谙]</span>&nbsp;欢迎登录!&nbsp; <a href="javascript:upPass();">修改密码</a>&nbsp;
                <a href="javascript:logout();">注销</a>
            </div>
        </div>
    </div>

    <!-- menu div -->
    <div class="panel layout-panel layout-panel-west" style="left: 0px; top: 50px; width: 220px;">
        <div class="panel-header panel-header-noborder" style="width: 210px;">
            <div class="panel-title">
                <font style="color:#333333;font-size:14px;font-weight:600;">菜单</font>
            </div>
            <div class="panel-tool"><a href="javascript:void(0)" class="layout-button-left"></a></div>
        </div>
        <div region="west" split="false" title="" class="leftMenu panel-body panel-body-noborder layout-body"
            border="false" style="width: 220px; height: 703px;">
            <div id="menu" class="easyui-tree tree tree-lines" data-options="animate:true,lines:true">
                <li>
                    <div class="tree-node tree-root-one tree-node-last" node-id="1" style="cursor: pointer;"><span
                            class="tree-hit tree-expanded"></span><span
                            class="tree-icon tree-folder tree-folder-open icons0"></span><span
                            class="tree-title">系统功能</span></div>
                    <ul>
                        <li>
                            <div class="tree-node tree-node-last" node-id="65" style="cursor: pointer;"><span
                                    class="tree-indent"></span><span class="tree-hit tree-expanded"></span><span
                                    class="tree-icon tree-folder tree-folder-open icons0"></span><span
                                    class="tree-title">审批管理</span></div>
                            <ul>
                                <li>
                                    <div class="tree-node tree-node-selected" node-id="66" style="cursor: pointer;">
                                        <span class="tree-indent"></span><span class="tree-indent"></span><span
                                            class="tree-indent tree-join"></span><span
                                            class="tree-icon tree-file icons10"></span><span
                                            class="tree-title">创建申请单</span></div>
                                </li>
                                <li>
                                    <div class="tree-node" node-id="123" style="cursor: pointer;"><span
                                            class="tree-indent"></span><span class="tree-indent"></span><span
                                            class="tree-indent tree-join"></span><span
                                            class="tree-icon tree-file"></span><span class="tree-title">预到期合同</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="tree-node" node-id="68" style="cursor: pointer;"><span
                                            class="tree-indent"></span><span class="tree-indent"></span><span
                                            class="tree-indent tree-join"></span><span
                                            class="tree-icon tree-file icons33"></span><span
                                            class="tree-title">我的申请单</span></div>
                                </li>
                                <li>
                                    <div class="tree-node tree-node-last" node-id="124" style="cursor: pointer;"><span
                                            class="tree-indent"></span><span class="tree-indent"></span><span
                                            class="tree-indent tree-joinbottom"></span><span
                                            class="tree-icon tree-file"></span><span class="tree-title">我的合同管理</span>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </div>
        </div>
    </div>


    <!-- main div -->
    <div class="panel layout-panel layout-panel-center" style="left: 220px; top: 50px; width: 761px;">
        <div region="center" split="false" style="width: 761px; height: 729px;" border="fasle"
            class="panel-noscroll panel-body panel-body-noheader panel-body-noborder layout-body" title="">
            <div id="tabs" name="tabs" fit="true" class="easyui-tabs tabs-container" border="fasle"
                style="width: 761px; height: 729px;">
                <div class="tabs-header tabs-header-noborder" style="width: 761px;">
                    <div class="tabs-scroller-left" style="display: none;"></div>
                    <div class="tabs-scroller-right" style="display: none;"></div>
                    <div class="tabs-wrap" style="margin-left: 0px; margin-right: 28px; width: 733px;">
                        <ul class="tabs">
                            <li class=""><a href="javascript:void(0)" class="tabs-inner"><span
                                        class="tabs-title">首页</span><span class="tabs-icon"></span></a></li>
                            <li class=""><a href="javascript:void(0)" class="tabs-inner"><span
                                        class="tabs-title tabs-closable">创建申请单</span><span
                                        class="tabs-icon"></span></a><a href="javascript:void(0)"
                                    class="tabs-close"></a></li>
                            <li class="tabs-selected"><a href="javascript:void(0)" class="tabs-inner"><span
                                        class="tabs-title tabs-closable">创建财务审批表</span><span
                                        class="tabs-icon"></span></a><a href="javascript:void(0)"
                                    class="tabs-close"></a></li>
                        </ul>
                    </div>
                    <div class="tabs-tool" style="height: 26px; right: 0px;"><a href="javascript:void(0);"
                            class="l-btn l-btn-plain" id=""><span class="l-btn-left"><span class="l-btn-text"><span
                                        class="l-btn-empty icon-reload-2">&nbsp;</span></span></span></a></div>
                </div>
                <div class="tabs-panels tabs-panels-noborder" style="height: 703px; width: 761px;">
                    <div class="panel" style="display: none; width: 761px;">
                        <div title="" style="padding: 2px; overflow: hidden; width: 757px; height: 699px;"
                            class="panel-body panel-body-noheader panel-body-noborder">
                            <iframe id="works" name="works" src="index_main.html?_frid=works" scrolling="auto"
                                frameborder="0" style="width: 100%; height: 100%;"></iframe>
                        </div>
                    </div>
                    <div class="panel" style="display: none; width: 761px;">
                        <div title="" class="panel-body panel-body-noheader panel-body-noborder"
                            style="width: 761px; height: 703px;"><iframe id="f_1761736592375" name="f_1761736592375"
                                scrolling="auto" frameborder="0"
                                src="/system/qdzxapproval/approval/create_apply.html?_frid=f_1761736592375&amp;subtitle=%25E5%2588%259B%25E5%25BB%25BA%25E7%2594%25B3%25E8%25AF%25B7%25E5%258D%2595"
                                style="width:100%;height:100%;"></iframe></div>
                    </div>
                    <div class="panel" style="display: block; width: 761px;">
                        <div title="" class="panel-body panel-body-noheader panel-body-noborder"
                            style="width: 761px; height: 703px;"><iframe id="f_1761736597851" name="f_1761736597851"
                                scrolling="auto" frameborder="0"
                                src="/system/qdzxapproval/approval/finance_add.html?type=81&amp;_pfrid=f_1761736592375&amp;_frid=f_1761736597851&amp;subtitle=%25E5%2588%259B%25E5%25BB%25BA%25E8%25B4%25A2%25E5%258A%25A1%25E5%25AE%25A1%25E6%2589%25B9%25E8%25A1%25A8"
                                style="width:100%;height:100%;"></iframe></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- bottom div -->
    <div class="panel layout-panel layout-panel-south" style="left: 0px; top: 779px; width: 981px;">
        <div region="south" split="false"
            class="footBottom panel-body panel-body-noheader panel-body-noborder layout-body" border="false" title=""
            style="width: 976px; height: 25px;">
            北京民安信科技发展有限公司</div>
    </div>







    <script language="JavaScript">
        jQuery(function () {
            //获取当前系统登录信息
            $.getJSON(contextPath + "user/loginUser?i=" + new Date().getTime(),
                {}, function (data) {
                    $('#logout >span').eq(0).text('[' + data['username'] + ',' + data['truename'] + ']');
                });
            //获取系统菜单

            $.getJSON(contextPath + "manager/menu/1/myTree?i=" + new Date().getTime(),
                {}, function (data) {
                    var datas = formatTree('parentObj', data, "id-id,text-name,iconCls-img");//参数重组
                    $('#menu').tree({ data: datas });
                    //菜单树的点击
                    $('#menu').tree({
                        onClick: function (node) {
                            var arg = node.attributes;
                            if (arg != undefined && arg.url != undefined) {
                                closeAllTab();
                                addTabs(node.text, arg.url);
                            }
                            return false;
                        }, onDblClick: function (node) {
                            if (node.state == 'closed')
                                $(this).tree('expand', node.target);
                            else
                                $(this).tree('collapse', node.target);
                        }
                    });
                    for (i in data) {
                        var link = contextPath + data[i]['link'];
                        if (link != null && link.length > 5) {
                            var thisNode = $('#menu').tree('find', data[i]['id']);
                            $('#menu').tree('update', {
                                target: thisNode.target,
                                attributes: { 'url': link }
                            });
                        }
                    }
                });


            jQuery('#tabs').tabs({
                tools: [{
                    iconCls: 'icon-reload-2', //刷新当前窗口
                    handler: function () {
                        refreshTabs();
                    }
                }]
            });
        });
        function closeAllTab() {
            var tab = $("#tabs");
            var tabs = tab.tabs("tabs")
            var closeTabsTitle = [];

            $.each(tabs, function () {
                var opt = $(this).panel("options");
                if (opt.title != "首页") {
                    closeTabsTitle.push(opt.title);
                }
            });
            for (var i = 0; i < closeTabsTitle.length; i++) {
                tab.tabs("close", closeTabsTitle[i]);
            }
        }

        //---------------------------------------------刷新当前tabl---------------------------------------------
        function refreshTabs(id) {
            var currTab;
            if (id != null) {
                currTab = $('#tabs').tabs('getTab', id);
            } else {
                currTab = $('#tabs').tabs('getSelected');
            }
            var url = $(currTab.panel('options').content).attr('src');
            var title = $(currTab).panel('options').title;
            var length = tabs.length;
            if (url != undefined && title != '首页') {
                $('#tabs').tabs('update', {
                    tab: currTab,
                    options: {
                        content: '<iframe style="width:100%;height:100%;" scrolling="yes" frameborder="0" src="' + url + '" id="' + title + '" name="tabs' + (length + 1) + '" />'
                    }
                });
            }
        }

        //---------------------------------------------添加选项卡---------------------------------------------
        function addTabs(title, url) {
            var tabs = jQuery("#tabs").tabs("tabs");
            var length = tabs.length;
            var frameId = 'f_' + getObjectId();
            if (!jQuery('#tabs').tabs('exists', title)) {  //添加到选项卡中
                jQuery('#tabs').tabs('add', {
                    'title': title,
                    'content': createFrame(frameId, title, url),
                    'closable': true
                });
                /*双击关闭TAB选项卡*/
                $(".tabs-inner").dblclick(function () {
                    var subtitle = $(this).children(".tabs-closable").text();
                    $('#tabs').tabs('close', subtitle);
                })
            } else {
                refreshTabs(title);
                jQuery('#tabs').tabs('select', title);
            }
        }

        //--------------------------------------绑定tabs的右键菜单---------------------------------------------
        $("#tabs").tabs({
            onContextMenu: function (e, title) {
                e.preventDefault();
                $('#tabsMenu').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                }).data("tabTitle", title);
            }
        });
        //实例化menu的onClick事件
        $("#tabsMenu").menu({
            onClick: function (item) {
                CloseTab(this, item.text);
            }
        });
        //几个关闭事件的实现
        function CloseTab(menu, type) {
            var curTabTitle = $(menu).data("tabTitle");
            var tabs = $("#tabs");
            if (type == "刷新") {
                refreshTabs();
            }
            if (curTabTitle != '首页' && type == "关闭") {
                tabs.tabs("close", curTabTitle);
                return;
            }
            var allTabs = tabs.tabs("tabs");
            var closeTabsTitle = [];

            $.each(allTabs, function () {
                var opt = $(this).panel("options");
                if (opt.closable && opt.title != curTabTitle && type === "关闭其他") {
                    closeTabsTitle.push(opt.title);
                } else if (opt.closable && type === "关闭所有") {
                    closeTabsTitle.push(opt.title);
                }
            });
            for (var i = 0; i < closeTabsTitle.length; i++) {
                tabs.tabs("close", closeTabsTitle[i]);
            }
        }


        ///----------------------------------------系统注销---------------------------------------------
        function logout() {
            $.messager.confirm('提示', '确定要注销吗?', function (r) {
                if (r) {
                    $.ajax({
                        url: contextPath + "login_out",
                        type: "GET",
                        dataType: "json",
                        success: function processJson(data) {
                            $.messager.alert("提示", data.handleMsg.message, "info", function () {
                                if (data.handleMsg.status == 1) {
                                    window.location.href = contextPath + 'system/login.html'
                                }
                            });
                        },
                        error: function (response) {
                            $.messager.alert("提示", response.responseText, "error");
                        }
                    });
                }
            });
        }
        ///----------------------------------------密码修改---------------------------------------------
        function upPass() {//密码修改
            $('#upPass').dialog('open');
        }
        function queDing() {
            var oldPass = $('#oldPass').val();
            var newPass = $('#newPass').val();
            var repeatPass = $('#repeatPass').val();
            if (oldPass == "") {
                $.messager.alert("提示", "请输入原始密码", "info");
                return;
            }
            if (newPass == "") {
                $.messager.alert("提示", "请输入新密码", "info");
                return;
            }
            if (repeatPass != newPass) {
                $.messager.alert("提示", "两次密码输入不一致", "info");
                return;
            }

            $.ajax({
                type: 'POST',
                url: contextPath + 'manager/users/updatePassword2',
                data: { 'password': newPass, 'oldPassword': oldPass },
                dataType: "json",
                success: function (data) {
                    if (data.handleMsg.status == 1) {
                        $.messager.alert("提示", "修改成功!", 'info', function () {
                            $('#oldPass').val('');
                            $('#newPass').val('');
                            $('#repeatPass').val('');
                            $('#upPass').dialog('close');
                        });
                    } else {
                        $.messager.alert("提示", data.handleMsg.message, 'info');
                    }
                },
                error: function (response) {
                    $.messager.alert("提示", "出错了，请联系管理员!", 'error', function (rt) {
                        $.messager.alert("提示", response.responseText, 'error');
                    });
                }
            });
        }
    </script>
    <div id="tabsMenu" style="width: 135px; display: none; left: 0px; top: 0px;" class="easyui-menu menu-top menu">
        <div class="menu-line"></div>
        <div name="" href="" class="menu-item" style="height: 20px;">
            <div class="menu-text">刷新</div>
        </div>
        <div name="" href="" class="menu-item" style="height: 20px;">
            <div class="menu-text">关闭</div>
        </div>
        <div name="" href="" class="menu-item" style="height: 20px;">
            <div class="menu-text">关闭其他</div>
        </div>
        <div name="" href="" class="menu-item" style="height: 20px;">
            <div class="menu-text">关闭所有</div>
        </div>
    </div>
    <div class="layout-split-proxy-h"></div>
    <div class="layout-split-proxy-v"></div>
    <div class="panel window" style="display: none; width: 400px; left: 290.5px; top: 317.5px;">
        <div class="panel-header panel-header-noborder window-header" style="width: 400px;">
            <div class="panel-title">密码修改</div>
            <div class="panel-tool"><a class="panel-tool-close" href="javascript:void(0)"></a></div>
        </div>
        <div id="upPass" class="easyui-dialog panel-body panel-body-noborder window-body" title=""
            buttons="#btn-buttons" modal="true" resizable="true" closed="true"
            style="overflow: hidden; width: 400px; height: auto;">
            <div class="panel" style="display: block; width: 400px;">
                <div style="padding: 5px; width: 390px; height: auto;" title=""
                    class="panel-body panel-body-noheader panel-body-noborder dialog-content" id="">
                    <table>
                        <tbody>
                            <tr height="28">
                                <td align="right" width="130">原始密码：</td>
                                <td align="left"><input type="password" name="oldPass" id="oldPass"><span id="mesg"
                                        style="color: red; font-weight: 600;"></span></td>
                            </tr>
                            <tr height="28">
                                <td align="right">新密码：</td>
                                <td align="left"><input type="password" name="newPass" id="newPass"></td>
                            </tr>
                            <tr height="28">
                                <td align="right">重复密码：</td>
                                <td align="left"><input type="password" name="repeatPass" id="repeatPass"></td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>
            <div id="btn-buttons" class="dialog-button">
                <a class="easyui-linkbutton l-btn" onclick="javascript:queDing();" id=""><span class="l-btn-left"><span
                            class="l-btn-text">确定</span></span></a> <a class="easyui-linkbutton l-btn"
                    onclick="javascript:$('#upPass').dialog('close');" id=""><span class="l-btn-left"><span
                            class="l-btn-text">取消</span></span></a>
            </div>
        </div>
    </div>
    <div class="window-shadow" style="display: none; left: 290.5px; top: 317.5px;"></div>
    <div class="window-mask" style="width: 981px; height: 809px; display: none;"></div>
    <div id="loading1"
        style="position: absolute; left: 0px; top: 0px; width: 100%; height: 809px; background: rgb(232, 232, 232); opacity: 0.5; z-index: 10000; display: none;">
    </div>
    <div id="loading2" class="panel-loading"
        style="position: fixed; top: 38%; left: 41%; border: 2px solid rgb(149, 184, 231); width: 160px; font-size: 14px; z-index: 10001; background: url(&quot;/system/jquery/themes/themes1/images/loading-1.gif&quot;) 10px 8px no-repeat rgb(255, 255, 255); display: none;">
        正在处理，请稍等...</div>
    <div id="_my97DP" style="position: absolute; top: -1970px; left: -1970px;"><iframe
            style="width: 186px; height: 198px;" src="http://59.110.7.147:8088/system/js/calendar/My97DatePicker.htm"
            frameborder="0" border="0" scrolling="no"></iframe></div>
</body>
<div id="immersive-translate-browser-popup" style="all: initial"><template shadowrootmode="open">
        <style>
            @charset "UTF-8";

            /*!
 * Pico.css v1.5.6 (https://picocss.com)
 * Copyright 2019-2022 - Licensed under MIT
 */
            /**
 * Theme: default
 */
            #mount {
                --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
                    "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
                    "Segoe UI Symbol", "Noto Color Emoji";
                --line-height: 1.5;
                --font-weight: 400;
                --font-size: 16px;
                --border-radius: 0.25rem;
                --border-width: 1px;
                --outline-width: 3px;
                --spacing: 1rem;
                --typography-spacing-vertical: 1.5rem;
                --block-spacing-vertical: calc(var(--spacing) * 2);
                --block-spacing-horizontal: var(--spacing);
                --grid-spacing-vertical: 0;
                --grid-spacing-horizontal: var(--spacing);
                --form-element-spacing-vertical: 0.75rem;
                --form-element-spacing-horizontal: 1rem;
                --nav-element-spacing-vertical: 1rem;
                --nav-element-spacing-horizontal: 0.5rem;
                --nav-link-spacing-vertical: 0.5rem;
                --nav-link-spacing-horizontal: 0.5rem;
                --form-label-font-weight: var(--font-weight);
                --transition: 0.2s ease-in-out;
                --modal-overlay-backdrop-filter: blur(0.25rem);
            }

            @media (min-width: 576px) {
                #mount {
                    --font-size: 17px;
                }
            }

            @media (min-width: 768px) {
                #mount {
                    --font-size: 18px;
                }
            }

            @media (min-width: 992px) {
                #mount {
                    --font-size: 19px;
                }
            }

            @media (min-width: 1200px) {
                #mount {
                    --font-size: 20px;
                }
            }

            @media (min-width: 576px) {

                #mount>header,
                #mount>main,
                #mount>footer,
                section {
                    --block-spacing-vertical: calc(var(--spacing) * 2);
                }
            }

            @media (min-width: 768px) {

                #mount>header,
                #mount>main,
                #mount>footer,
                section {
                    --block-spacing-vertical: calc(var(--spacing) * 2.5);
                }
            }

            @media (min-width: 992px) {

                #mount>header,
                #mount>main,
                #mount>footer,
                section {
                    --block-spacing-vertical: calc(var(--spacing) * 3);
                }
            }

            @media (min-width: 1200px) {

                #mount>header,
                #mount>main,
                #mount>footer,
                section {
                    --block-spacing-vertical: calc(var(--spacing) * 3.5);
                }
            }

            @media (min-width: 576px) {
                article {
                    --block-spacing-horizontal: calc(var(--spacing) * 1.25);
                }
            }

            @media (min-width: 768px) {
                article {
                    --block-spacing-horizontal: calc(var(--spacing) * 1.5);
                }
            }

            @media (min-width: 992px) {
                article {
                    --block-spacing-horizontal: calc(var(--spacing) * 1.75);
                }
            }

            @media (min-width: 1200px) {
                article {
                    --block-spacing-horizontal: calc(var(--spacing) * 2);
                }
            }

            dialog>article {
                --block-spacing-vertical: calc(var(--spacing) * 2);
                --block-spacing-horizontal: var(--spacing);
            }

            @media (min-width: 576px) {
                dialog>article {
                    --block-spacing-vertical: calc(var(--spacing) * 2.5);
                    --block-spacing-horizontal: calc(var(--spacing) * 1.25);
                }
            }

            @media (min-width: 768px) {
                dialog>article {
                    --block-spacing-vertical: calc(var(--spacing) * 3);
                    --block-spacing-horizontal: calc(var(--spacing) * 1.5);
                }
            }

            a {
                --text-decoration: none;
            }

            a.secondary,
            a.contrast {
                --text-decoration: underline;
            }

            small {
                --font-size: 0.875em;
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                --font-weight: 700;
            }

            h1 {
                --font-size: 2rem;
                --typography-spacing-vertical: 3rem;
            }

            h2 {
                --font-size: 1.75rem;
                --typography-spacing-vertical: 2.625rem;
            }

            h3 {
                --font-size: 1.5rem;
                --typography-spacing-vertical: 2.25rem;
            }

            h4 {
                --font-size: 1.25rem;
                --typography-spacing-vertical: 1.874rem;
            }

            h5 {
                --font-size: 1.125rem;
                --typography-spacing-vertical: 1.6875rem;
            }

            [type="checkbox"],
            [type="radio"] {
                --border-width: 2px;
            }

            [type="checkbox"][role="switch"] {
                --border-width: 2px;
            }

            thead th,
            thead td,
            tfoot th,
            tfoot td {
                --border-width: 3px;
            }

            :not(thead, tfoot)>*>td {
                --font-size: 0.875em;
            }

            pre,
            code,
            kbd,
            samp {
                --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
                    "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
                    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            }

            kbd {
                --font-weight: bolder;
            }

            [data-theme="light"],
            #mount:not([data-theme="dark"]) {
                --background-color: #fff;
                --background-light-green: #f5f7f9;
                --color: hsl(205deg, 20%, 32%);
                --h1-color: hsl(205deg, 30%, 15%);
                --h2-color: #24333e;
                --h3-color: hsl(205deg, 25%, 23%);
                --h4-color: #374956;
                --h5-color: hsl(205deg, 20%, 32%);
                --h6-color: #4d606d;
                --muted-color: hsl(205deg, 10%, 50%);
                --muted-border-color: hsl(205deg, 20%, 94%);
                --primary: hsl(195deg, 85%, 41%);
                --primary-hover: hsl(195deg, 90%, 32%);
                --primary-focus: rgba(16, 149, 193, 0.125);
                --primary-inverse: #fff;
                --secondary: hsl(205deg, 15%, 41%);
                --secondary-hover: hsl(205deg, 20%, 32%);
                --secondary-focus: rgba(89, 107, 120, 0.125);
                --secondary-inverse: #fff;
                --contrast: hsl(205deg, 30%, 15%);
                --contrast-hover: #000;
                --contrast-focus: rgba(89, 107, 120, 0.125);
                --contrast-inverse: #fff;
                --mark-background-color: #fff2ca;
                --mark-color: #543a26;
                --ins-color: #388e3c;
                --del-color: #c62828;
                --blockquote-border-color: var(--muted-border-color);
                --blockquote-footer-color: var(--muted-color);
                --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
                --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
                --form-element-background-color: transparent;
                --form-element-border-color: hsl(205deg, 14%, 68%);
                --form-element-color: var(--color);
                --form-element-placeholder-color: var(--muted-color);
                --form-element-active-background-color: transparent;
                --form-element-active-border-color: var(--primary);
                --form-element-focus-color: var(--primary-focus);
                --form-element-disabled-background-color: hsl(205deg, 18%, 86%);
                --form-element-disabled-border-color: hsl(205deg, 14%, 68%);
                --form-element-disabled-opacity: 0.5;
                --form-element-invalid-border-color: #c62828;
                --form-element-invalid-active-border-color: #d32f2f;
                --form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
                --form-element-valid-border-color: #388e3c;
                --form-element-valid-active-border-color: #43a047;
                --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
                --switch-background-color: hsl(205deg, 16%, 77%);
                --switch-color: var(--primary-inverse);
                --switch-checked-background-color: var(--primary);
                --range-border-color: hsl(205deg, 18%, 86%);
                --range-active-border-color: hsl(205deg, 16%, 77%);
                --range-thumb-border-color: var(--background-color);
                --range-thumb-color: var(--secondary);
                --range-thumb-hover-color: var(--secondary-hover);
                --range-thumb-active-color: var(--primary);
                --table-border-color: var(--muted-border-color);
                --table-row-stripped-background-color: #f6f8f9;
                --code-background-color: hsl(205deg, 20%, 94%);
                --code-color: var(--muted-color);
                --code-kbd-background-color: var(--contrast);
                --code-kbd-color: var(--contrast-inverse);
                --code-tag-color: hsl(330deg, 40%, 50%);
                --code-property-color: hsl(185deg, 40%, 40%);
                --code-value-color: hsl(40deg, 20%, 50%);
                --code-comment-color: hsl(205deg, 14%, 68%);
                --accordion-border-color: var(--muted-border-color);
                --accordion-close-summary-color: var(--color);
                --accordion-open-summary-color: var(--muted-color);
                --card-background-color: var(--background-color);
                --card-border-color: var(--muted-border-color);
                --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
                    0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
                    0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
                    0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
                    0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
                    0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
                    0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
                --card-sectionning-background-color: #fbfbfc;
                --dropdown-background-color: #fbfbfc;
                --dropdown-border-color: #e1e6eb;
                --dropdown-box-shadow: var(--card-box-shadow);
                --dropdown-color: var(--color);
                --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
                --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
                --progress-background-color: hsl(205deg, 18%, 86%);
                --progress-color: var(--primary);
                --loading-spinner-opacity: 0.5;
                --tooltip-background-color: var(--contrast);
                --tooltip-color: var(--contrast-inverse);
                --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
                --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
                --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
                --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
                --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
                --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
                --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
                --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
                --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
                --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
                --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
                --icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTguOTM0OCA4LjY0ODQ0QzIwLjg5NDEgOC42NDg0NCAyMi40ODU1IDcuMDU0NjkgMjIuNDg1NSA1LjA5NzY2QzIyLjQ4NTUgMy4xNDA2MiAyMC44OTE4IDEuNTQ2ODggMTguOTM0OCAxLjU0Njg4QzE2Ljk3NTQgMS41NDY4OCAxNS4zODQgMy4xNDA2MiAxNS4zODQgNS4wOTc2NkMxNS4zODQgNS4yOTkyMiAxNS40MDA0IDUuNDkzNzUgMTUuNDMzMiA1LjY4NTk0TDcuMzIzODMgOS4zNTM5MUM2LjcwOTc3IDguODQ1MzEgNS45MjIyNyA4LjU0MDYyIDUuMDY0NDUgOC41NDA2MkMzLjEwNTA4IDguNTQwNjIgMS41MTM2NyAxMC4xMzQ0IDEuNTEzNjcgMTIuMDkxNEMxLjUxMzY3IDE0LjA0ODQgMy4xMDc0MiAxNS42NDIyIDUuMDY0NDUgMTUuNjQyMkM1LjgzMzIgMTUuNjQyMiA2LjU0NTcgMTUuMzk2MSA3LjEyNjk1IDE0Ljk4MTNMMTIuNDk0MSAxNy45OTUzQzEyLjQxNjggMTguMjg1OSAxMi4zNzcgMTguNTg4MyAxMi4zNzcgMTguOTAyM0MxMi4zNzcgMjAuODYxNyAxMy45NzA3IDIyLjQ1MzEgMTUuOTI3NyAyMi40NTMxQzE3Ljg4NzEgMjIuNDUzMSAxOS40Nzg1IDIwLjg1OTQgMTkuNDc4NSAxOC45MDIzQzE5LjQ3ODUgMTYuOTQzIDE3Ljg4NDggMTUuMzUxNiAxNS45Mjc3IDE1LjM1MTZDMTQuOTU3NCAxNS4zNTE2IDE0LjA3ODUgMTUuNzQzIDEzLjQzNjMgMTYuMzczNEw4LjMyMjI3IDEzLjUwNDdDOC41MDk3NyAxMy4wNzExIDguNjE1MjMgMTIuNTk1MyA4LjYxNTIzIDEyLjA5MzhDOC42MTUyMyAxMS42ODEyIDguNTQ0OTIgMTEuMjg3NSA4LjQxNjAyIDEwLjkxOTVMMTYuMjIzIDcuMzg3NUMxNi44NzQ2IDguMTU2MjUgMTcuODQ5NiA4LjY0ODQ0IDE4LjkzNDggOC42NDg0NFpNNS4wNjQ0NSAxMy43Njk1QzQuMTQxMDIgMTMuNzY5NSAzLjM4ODY3IDEzLjAxNzIgMy4zODg2NyAxMi4wOTM4QzMuMzg4NjcgMTEuMTcwMyA0LjE0MTAyIDEwLjQxOCA1LjA2NDQ1IDEwLjQxOEM1Ljk4Nzg5IDEwLjQxOCA2Ljc0MDIzIDExLjE3MDMgNi43NDAyMyAxMi4wOTM4QzYuNzQwMjMgMTMuMDE3MiA1Ljk4Nzg5IDEzLjc2OTUgNS4wNjQ0NSAxMy43Njk1Wk0xNS45Mjc3IDE3LjIyNjZDMTYuODUxMiAxNy4yMjY2IDE3LjYwMzUgMTcuOTc4OSAxNy42MDM1IDE4LjkwMjNDMTcuNjAzNSAxOS44MjU4IDE2Ljg1MTIgMjAuNTc4MSAxNS45Mjc3IDIwLjU3ODFDMTUuMDA0MyAyMC41NzgxIDE0LjI1MiAxOS44MjU4IDE0LjI1MiAxOC45MDIzQzE0LjI1MiAxNy45Nzg5IDE1LjAwMiAxNy4yMjY2IDE1LjkyNzcgMTcuMjI2NlpNMTguOTM0OCAzLjQxOTUzQzE5Ljg1ODIgMy40MTk1MyAyMC42MTA1IDQuMTcxODcgMjAuNjEwNSA1LjA5NTMxQzIwLjYxMDUgNi4wMTg3NSAxOS44NTgyIDYuNzcxMDkgMTguOTM0OCA2Ljc3MTA5QzE4LjAxMTMgNi43NzEwOSAxNy4yNTkgNi4wMTg3NSAxNy4yNTkgNS4wOTUzMUMxNy4yNTkgNC4xNzE4NyAxOC4wMTEzIDMuNDE5NTMgMTguOTM0OCAzLjQxOTUzWicgZmlsbD0nIzgzODM4MycvPjwvc3ZnPiA=");
                --float-ball-more-button-border-color: #f6f6f6;
                --float-ball-more-button-background-color: #ffffff;
                --float-ball-more-button-svg-color: #6c6f73;
                color-scheme: light;
                --service-bg-hover: #f7faff;
                --service-bg: #fafbfb;
            }

            @media only screen and (prefers-color-scheme: dark) {
                #mount:not([data-theme="light"]) {
                    --background-color: #11191f;
                    --float-ball-more-button-background-color: #ffffff;
                    --background-light-green: #141e26;
                    --color: hsl(205deg, 16%, 77%);
                    --h1-color: hsl(205deg, 20%, 94%);
                    --h2-color: #e1e6eb;
                    --h3-color: hsl(205deg, 18%, 86%);
                    --h4-color: #c8d1d8;
                    --h5-color: hsl(205deg, 16%, 77%);
                    --h6-color: #afbbc4;
                    --muted-color: hsl(205deg, 10%, 50%);
                    --muted-border-color: #1f2d38;
                    --primary: hsl(195deg, 85%, 41%);
                    --primary-hover: hsl(195deg, 80%, 50%);
                    --primary-focus: rgba(16, 149, 193, 0.25);
                    --primary-inverse: #fff;
                    --secondary: hsl(205deg, 15%, 41%);
                    --secondary-hover: hsl(205deg, 10%, 50%);
                    --secondary-focus: rgba(115, 130, 140, 0.25);
                    --secondary-inverse: #fff;
                    --contrast: hsl(205deg, 20%, 94%);
                    --contrast-hover: #fff;
                    --contrast-focus: rgba(115, 130, 140, 0.25);
                    --contrast-inverse: #000;
                    --mark-background-color: #d1c284;
                    --mark-color: #11191f;
                    --ins-color: #388e3c;
                    --del-color: #c62828;
                    --blockquote-border-color: var(--muted-border-color);
                    --blockquote-footer-color: var(--muted-color);
                    --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
                    --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
                    --form-element-background-color: #11191f;
                    --form-element-border-color: #374956;
                    --form-element-color: var(--color);
                    --form-element-placeholder-color: var(--muted-color);
                    --form-element-active-background-color: var(--form-element-background-color);
                    --form-element-active-border-color: var(--primary);
                    --form-element-focus-color: var(--primary-focus);
                    --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
                    --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
                    --form-element-disabled-opacity: 0.5;
                    --form-element-invalid-border-color: #b71c1c;
                    --form-element-invalid-active-border-color: #c62828;
                    --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
                    --form-element-valid-border-color: #2e7d32;
                    --form-element-valid-active-border-color: #388e3c;
                    --form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
                    --switch-background-color: #374956;
                    --switch-color: var(--primary-inverse);
                    --switch-checked-background-color: var(--primary);
                    --range-border-color: #24333e;
                    --range-active-border-color: hsl(205deg, 25%, 23%);
                    --range-thumb-border-color: var(--background-color);
                    --range-thumb-color: var(--secondary);
                    --range-thumb-hover-color: var(--secondary-hover);
                    --range-thumb-active-color: var(--primary);
                    --table-border-color: var(--muted-border-color);
                    --table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
                    --code-background-color: #18232c;
                    --code-color: var(--muted-color);
                    --code-kbd-background-color: var(--contrast);
                    --code-kbd-color: var(--contrast-inverse);
                    --code-tag-color: hsl(330deg, 30%, 50%);
                    --code-property-color: hsl(185deg, 30%, 50%);
                    --code-value-color: hsl(40deg, 10%, 50%);
                    --code-comment-color: #4d606d;
                    --accordion-border-color: var(--muted-border-color);
                    --accordion-active-summary-color: var(--primary);
                    --accordion-close-summary-color: var(--color);
                    --accordion-open-summary-color: var(--muted-color);
                    --card-background-color: #141e26;
                    --card-border-color: var(--card-background-color);
                    --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
                        0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
                        0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
                        0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
                        0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
                        0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
                    --card-sectionning-background-color: #18232c;
                    --dropdown-background-color: hsl(205deg, 30%, 15%);
                    --dropdown-border-color: #24333e;
                    --dropdown-box-shadow: var(--card-box-shadow);
                    --dropdown-color: var(--color);
                    --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
                    --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
                    --progress-background-color: #24333e;
                    --progress-color: var(--primary);
                    --loading-spinner-opacity: 0.5;
                    --tooltip-background-color: var(--contrast);
                    --tooltip-color: var(--contrast-inverse);
                    --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
                    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
                    --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
                    --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
                    --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
                    --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
                    --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
                    --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
                    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
                    --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
                    --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
                    --icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjInIGhlaWdodD0nMjInIHZpZXdCb3g9JzAgMCAyMiAyMicgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTcuOTM0OCA3LjY0ODQ0QzE5Ljg5NDEgNy42NDg0NCAyMS40ODU1IDYuMDU0NjkgMjEuNDg1NSA0LjA5NzY2QzIxLjQ4NTUgMi4xNDA2MiAxOS44OTE4IDAuNTQ2ODc1IDE3LjkzNDggMC41NDY4NzVDMTUuOTc1NCAwLjU0Njg3NSAxNC4zODQgMi4xNDA2MiAxNC4zODQgNC4wOTc2NkMxNC4zODQgNC4yOTkyMiAxNC40MDA0IDQuNDkzNzUgMTQuNDMzMiA0LjY4NTk0TDYuMzIzODMgOC4zNTM5MUM1LjcwOTc3IDcuODQ1MzEgNC45MjIyNyA3LjU0MDYyIDQuMDY0NDUgNy41NDA2MkMyLjEwNTA4IDcuNTQwNjIgMC41MTM2NzIgOS4xMzQzOCAwLjUxMzY3MiAxMS4wOTE0QzAuNTEzNjcyIDEzLjA0ODQgMi4xMDc0MiAxNC42NDIyIDQuMDY0NDUgMTQuNjQyMkM0LjgzMzIgMTQuNjQyMiA1LjU0NTcgMTQuMzk2MSA2LjEyNjk1IDEzLjk4MTNMMTEuNDk0MSAxNi45OTUzQzExLjQxNjggMTcuMjg1OSAxMS4zNzcgMTcuNTg4MyAxMS4zNzcgMTcuOTAyM0MxMS4zNzcgMTkuODYxNyAxMi45NzA3IDIxLjQ1MzEgMTQuOTI3NyAyMS40NTMxQzE2Ljg4NzEgMjEuNDUzMSAxOC40Nzg1IDE5Ljg1OTQgMTguNDc4NSAxNy45MDIzQzE4LjQ3ODUgMTUuOTQzIDE2Ljg4NDggMTQuMzUxNiAxNC45Mjc3IDE0LjM1MTZDMTMuOTU3NCAxNC4zNTE2IDEzLjA3ODUgMTQuNzQzIDEyLjQzNjMgMTUuMzczNEw3LjMyMjI3IDEyLjUwNDdDNy41MDk3NyAxMi4wNzExIDcuNjE1MjMgMTEuNTk1MyA3LjYxNTIzIDExLjA5MzhDNy42MTUyMyAxMC42ODEyIDcuNTQ0OTIgMTAuMjg3NSA3LjQxNjAyIDkuOTE5NTNMMTUuMjIzIDYuMzg3NUMxNS44NzQ2IDcuMTU2MjUgMTYuODQ5NiA3LjY0ODQ0IDE3LjkzNDggNy42NDg0NFpNNC4wNjQ0NSAxMi43Njk1QzMuMTQxMDIgMTIuNzY5NSAyLjM4ODY3IDEyLjAxNzIgMi4zODg2NyAxMS4wOTM4QzIuMzg4NjcgMTAuMTcwMyAzLjE0MTAyIDkuNDE3OTcgNC4wNjQ0NSA5LjQxNzk3QzQuOTg3ODkgOS40MTc5NyA1Ljc0MDIzIDEwLjE3MDMgNS43NDAyMyAxMS4wOTM4QzUuNzQwMjMgMTIuMDE3MiA0Ljk4Nzg5IDEyLjc2OTUgNC4wNjQ0NSAxMi43Njk1Wk0xNC45Mjc3IDE2LjIyNjZDMTUuODUxMiAxNi4yMjY2IDE2LjYwMzUgMTYuOTc4OSAxNi42MDM1IDE3LjkwMjNDMTYuNjAzNSAxOC44MjU4IDE1Ljg1MTIgMTkuNTc4MSAxNC45Mjc3IDE5LjU3ODFDMTQuMDA0MyAxOS41NzgxIDEzLjI1MiAxOC44MjU4IDEzLjI1MiAxNy45MDIzQzEzLjI1MiAxNi45Nzg5IDE0LjAwMiAxNi4yMjY2IDE0LjkyNzcgMTYuMjI2NlpNMTcuOTM0OCAyLjQxOTUzQzE4Ljg1ODIgMi40MTk1MyAxOS42MTA1IDMuMTcxODcgMTkuNjEwNSA0LjA5NTMxQzE5LjYxMDUgNS4wMTg3NSAxOC44NTgyIDUuNzcxMDkgMTcuOTM0OCA1Ljc3MTA5QzE3LjAxMTMgNS43NzEwOSAxNi4yNTkgNS4wMTg3NSAxNi4yNTkgNC4wOTUzMUMxNi4yNTkgMy4xNzE4NyAxNy4wMTEzIDIuNDE5NTMgMTcuOTM0OCAyLjQxOTUzWicgZmlsbD0nI0I2QjZCNicvPjwvc3ZnPiA=");
                    color-scheme: dark;
                    --service-bg-hover: #22292f;
                    --service-bg: rgba(0, 0, 0, 0.1);
                }
            }

            [data-theme="dark"] {
                --background-color: #11191f;
                --float-ball-more-button-background-color: #191919;
                --background-light-green: #141e26;
                --color: hsl(205deg, 16%, 77%);
                --h1-color: hsl(205deg, 20%, 94%);
                --h2-color: #e1e6eb;
                --h3-color: hsl(205deg, 18%, 86%);
                --h4-color: #c8d1d8;
                --h5-color: hsl(205deg, 16%, 77%);
                --h6-color: #afbbc4;
                --muted-color: hsl(205deg, 10%, 50%);
                --muted-border-color: #1f2d38;
                --primary: hsl(195deg, 85%, 41%);
                --primary-hover: hsl(195deg, 80%, 50%);
                --primary-focus: rgba(16, 149, 193, 0.25);
                --primary-inverse: #fff;
                --secondary: hsl(205deg, 15%, 41%);
                --secondary-hover: hsl(205deg, 10%, 50%);
                --secondary-focus: rgba(115, 130, 140, 0.25);
                --secondary-inverse: #fff;
                --contrast: hsl(205deg, 20%, 94%);
                --contrast-hover: #fff;
                --contrast-focus: rgba(115, 130, 140, 0.25);
                --contrast-inverse: #000;
                --mark-background-color: #d1c284;
                --mark-color: #11191f;
                --ins-color: #388e3c;
                --del-color: #c62828;
                --blockquote-border-color: var(--muted-border-color);
                --blockquote-footer-color: var(--muted-color);
                --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
                --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
                --form-element-background-color: #11191f;
                --form-element-border-color: #374956;
                --form-element-color: var(--color);
                --form-element-placeholder-color: var(--muted-color);
                --form-element-active-background-color: var(--form-element-background-color);
                --form-element-active-border-color: var(--primary);
                --form-element-focus-color: var(--primary-focus);
                --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
                --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
                --form-element-disabled-opacity: 0.5;
                --form-element-invalid-border-color: #b71c1c;
                --form-element-invalid-active-border-color: #c62828;
                --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
                --form-element-valid-border-color: #2e7d32;
                --form-element-valid-active-border-color: #388e3c;
                --form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
                --switch-background-color: #374956;
                --switch-color: var(--primary-inverse);
                --switch-checked-background-color: var(--primary);
                --range-border-color: #24333e;
                --range-active-border-color: hsl(205deg, 25%, 23%);
                --range-thumb-border-color: var(--background-color);
                --range-thumb-color: var(--secondary);
                --range-thumb-hover-color: var(--secondary-hover);
                --range-thumb-active-color: var(--primary);
                --table-border-color: var(--muted-border-color);
                --table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
                --code-background-color: #18232c;
                --code-color: var(--muted-color);
                --code-kbd-background-color: var(--contrast);
                --code-kbd-color: var(--contrast-inverse);
                --code-tag-color: hsl(330deg, 30%, 50%);
                --code-property-color: hsl(185deg, 30%, 50%);
                --code-value-color: hsl(40deg, 10%, 50%);
                --code-comment-color: #4d606d;
                --accordion-border-color: var(--muted-border-color);
                --accordion-active-summary-color: var(--primary);
                --accordion-close-summary-color: var(--color);
                --accordion-open-summary-color: var(--muted-color);
                --card-background-color: #141e26;
                --card-border-color: var(--card-background-color);
                --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
                    0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
                    0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
                    0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
                    0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
                    0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
                --card-sectionning-background-color: #18232c;
                --dropdown-background-color: hsl(205deg, 30%, 15%);
                --dropdown-border-color: #24333e;
                --dropdown-box-shadow: var(--card-box-shadow);
                --dropdown-color: var(--color);
                --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
                --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
                --progress-background-color: #24333e;
                --progress-color: var(--primary);
                --loading-spinner-opacity: 0.5;
                --tooltip-background-color: var(--contrast);
                --tooltip-color: var(--contrast-inverse);
                --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
                --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
                --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
                --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
                --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
                --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
                --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
                --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
                --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
                --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
                --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
                --icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjInIGhlaWdodD0nMjInIHZpZXdCb3g9JzAgMCAyMiAyMicgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTcuOTM0OCA3LjY0ODQ0QzE5Ljg5NDEgNy42NDg0NCAyMS40ODU1IDYuMDU0NjkgMjEuNDg1NSA0LjA5NzY2QzIxLjQ4NTUgMi4xNDA2MiAxOS44OTE4IDAuNTQ2ODc1IDE3LjkzNDggMC41NDY4NzVDMTUuOTc1NCAwLjU0Njg3NSAxNC4zODQgMi4xNDA2MiAxNC4zODQgNC4wOTc2NkMxNC4zODQgNC4yOTkyMiAxNC40MDA0IDQuNDkzNzUgMTQuNDMzMiA0LjY4NTk0TDYuMzIzODMgOC4zNTM5MUM1LjcwOTc3IDcuODQ1MzEgNC45MjIyNyA3LjU0MDYyIDQuMDY0NDUgNy41NDA2MkMyLjEwNTA4IDcuNTQwNjIgMC41MTM2NzIgOS4xMzQzOCAwLjUxMzY3MiAxMS4wOTE0QzAuNTEzNjcyIDEzLjA0ODQgMi4xMDc0MiAxNC42NDIyIDQuMDY0NDUgMTQuNjQyMkM0LjgzMzIgMTQuNjQyMiA1LjU0NTcgMTQuMzk2MSA2LjEyNjk1IDEzLjk4MTNMMTEuNDk0MSAxNi45OTUzQzExLjQxNjggMTcuMjg1OSAxMS4zNzcgMTcuNTg4MyAxMS4zNzcgMTcuOTAyM0MxMS4zNzcgMTkuODYxNyAxMi45NzA3IDIxLjQ1MzEgMTQuOTI3NyAyMS40NTMxQzE2Ljg4NzEgMjEuNDUzMSAxOC40Nzg1IDE5Ljg1OTQgMTguNDc4NSAxNy45MDIzQzE4LjQ3ODUgMTUuOTQzIDE2Ljg4NDggMTQuMzUxNiAxNC45Mjc3IDE0LjM1MTZDMTMuOTU3NCAxNC4zNTE2IDEzLjA3ODUgMTQuNzQzIDEyLjQzNjMgMTUuMzczNEw3LjMyMjI3IDEyLjUwNDdDNy41MDk3NyAxMi4wNzExIDcuNjE1MjMgMTEuNTk1MyA3LjYxNTIzIDExLjA5MzhDNy42MTUyMyAxMC42ODEyIDcuNTQ0OTIgMTAuMjg3NSA3LjQxNjAyIDkuOTE5NTNMMTUuMjIzIDYuMzg3NUMxNS44NzQ2IDcuMTU2MjUgMTYuODQ5NiA3LjY0ODQ0IDE3LjkzNDggNy42NDg0NFpNNC4wNjQ0NSAxMi43Njk1QzMuMTQxMDIgMTIuNzY5NSAyLjM4ODY3IDEyLjAxNzIgMi4zODg2NyAxMS4wOTM4QzIuMzg4NjcgMTAuMTcwMyAzLjE0MTAyIDkuNDE3OTcgNC4wNjQ0NSA5LjQxNzk3QzQuOTg3ODkgOS40MTc5NyA1Ljc0MDIzIDEwLjE3MDMgNS43NDAyMyAxMS4wOTM4QzUuNzQwMjMgMTIuMDE3MiA0Ljk4Nzg5IDEyLjc2OTUgNC4wNjQ0NSAxMi43Njk1Wk0xNC45Mjc3IDE2LjIyNjZDMTUuODUxMiAxNi4yMjY2IDE2LjYwMzUgMTYuOTc4OSAxNi42MDM1IDE3LjkwMjNDMTYuNjAzNSAxOC44MjU4IDE1Ljg1MTIgMTkuNTc4MSAxNC45Mjc3IDE5LjU3ODFDMTQuMDA0MyAxOS41NzgxIDEzLjI1MiAxOC44MjU4IDEzLjI1MiAxNy45MDIzQzEzLjI1MiAxNi45Nzg5IDE0LjAwMiAxNi4yMjY2IDE0LjkyNzcgMTYuMjI2NlpNMTcuOTM0OCAyLjQxOTUzQzE4Ljg1ODIgMi40MTk1MyAxOS42MTA1IDMuMTcxODcgMTkuNjEwNSA0LjA5NTMxQzE5LjYxMDUgNS4wMTg3NSAxOC44NTgyIDUuNzcxMDkgMTcuOTM0OCA1Ljc3MTA5QzE3LjAxMTMgNS43NzEwOSAxNi4yNTkgNS4wMTg3NSAxNi4yNTkgNC4wOTUzMUMxNi4yNTkgMy4xNzE4NyAxNy4wMTEzIDIuNDE5NTMgMTcuOTM0OCAyLjQxOTUzWicgZmlsbD0nI0I2QjZCNicvPjwvc3ZnPiA=");
                color-scheme: dark;
                --service-bg: rgba(0, 0, 0, 0.1);
            }

            progress,
            [type="checkbox"],
            [type="radio"],
            [type="range"] {
                accent-color: var(--primary);
            }

            /**
 * Document
 * Content-box & Responsive typography
 */
            *,
            *::before,
            *::after {
                box-sizing: border-box;
                background-repeat: no-repeat;
            }

            ::before,
            ::after {
                text-decoration: inherit;
                vertical-align: inherit;
            }

            :where(#mount) {
                -webkit-tap-highlight-color: transparent;
                -webkit-text-size-adjust: 100%;
                -moz-text-size-adjust: 100%;
                text-size-adjust: 100%;
                background-color: var(--background-color);
                color: var(--color);
                font-weight: var(--font-weight);
                font-size: var(--font-size);
                line-height: var(--line-height);
                font-family: var(--font-family);
                text-rendering: optimizeLegibility;
                overflow-wrap: break-word;
                cursor: default;
                -moz-tab-size: 4;
                -o-tab-size: 4;
                tab-size: 4;
            }

            /**
 * Sectioning
 * Container and responsive spacings for header, main, footer
 */
            main {
                display: block;
            }

            #mount {
                width: 100%;
                margin: 0;
            }

            #mount>header,
            #mount>main,
            #mount>footer {
                width: 100%;
                margin-right: auto;
                margin-left: auto;
                padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
            }

            @media (min-width: 576px) {

                #mount>header,
                #mount>main,
                #mount>footer {
                    padding: 2px !important;
                }
            }

            @media (min-width: 992px) {

                #mount>header,
                #mount>main,
                #mount>footer {
                    padding: 0 12px !important;
                }
            }

            @media (min-width: 1200px) {

                #mount>header,
                #mount>main,
                #mount>footer {
                    padding: 0 24px !important;
                }
            }

            /**
* Container
*/
            .container,
            .container-fluid {
                width: 100%;
                margin-right: auto;
                margin-left: auto;
                padding-right: var(--spacing);
                padding-left: var(--spacing);
            }

            /*
@media (min-width: 576px) {
  .container {
    max-width: 510px;
    padding-right: 0;
    padding-left: 0;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 700px;
  }
} */
            @media (min-width: 992px) {
                .container {
                    max-width: 920px;
                }
            }

            @media (min-width: 1200px) {
                .container {
                    max-width: 1130px;
                }
            }

            /**
 * Section
 * Responsive spacings for section
 */
            section {
                margin-bottom: var(--block-spacing-vertical);
            }

            /**
* Grid
* Minimal grid system with auto-layout columns
*/
            .grid {
                grid-column-gap: var(--grid-spacing-horizontal);
                grid-row-gap: var(--grid-spacing-vertical);
                display: grid;
                grid-template-columns: 1fr;
                margin: 0;
            }

            @media (min-width: 1280px) {
                .grid {
                    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
                }
            }

            .grid>* {
                min-width: 0;
            }

            /**
 * Horizontal scroller (<figure>)
 */
            figure {
                display: block;
                margin: 0;
                padding: 0;
                overflow-x: auto;
            }

            figure figcaption {
                padding: calc(var(--spacing) * 0.5) 0;
                color: var(--muted-color);
            }

            /**
 * Typography
 */
            b,
            strong {
                font-weight: bolder;
            }

            sub,
            sup {
                position: relative;
                font-size: 0.75em;
                line-height: 0;
                vertical-align: baseline;
            }

            sub {
                bottom: -0.25em;
            }

            sup {
                top: -0.5em;
            }

            address,
            blockquote,
            dl,
            figure,
            form,
            ol,
            p,
            pre,
            table,
            ul {
                margin-top: 0;
                margin-bottom: var(--typography-spacing-vertical);
                color: var(--color);
                font-style: normal;
                font-weight: var(--font-weight);
                font-size: var(--font-size);
            }

            a,
            [role="link"] {
                --color: var(--primary);
                --background-color: transparent;
                outline: none;
                background-color: var(--background-color);
                color: var(--color);
                -webkit-text-decoration: var(--text-decoration);
                text-decoration: var(--text-decoration);
                transition: background-color var(--transition), color var(--transition),
                    box-shadow var(--transition), -webkit-text-decoration var(--transition);
                transition: background-color var(--transition), color var(--transition),
                    text-decoration var(--transition), box-shadow var(--transition);
                transition: background-color var(--transition), color var(--transition),
                    text-decoration var(--transition), box-shadow var(--transition),
                    -webkit-text-decoration var(--transition);
            }

            a:is([aria-current], :hover, :active, :focus),
            [role="link"]:is([aria-current], :hover, :active, :focus) {
                --color: var(--primary-hover);
                --text-decoration: underline;
            }

            a:focus,
            [role="link"]:focus {
                --background-color: var(--primary-focus);
            }

            a.secondary,
            [role="link"].secondary {
                --color: var(--secondary);
            }

            a.secondary:is([aria-current], :hover, :active, :focus),
            [role="link"].secondary:is([aria-current], :hover, :active, :focus) {
                --color: var(--secondary-hover);
            }

            a.secondary:focus,
            [role="link"].secondary:focus {
                --background-color: var(--secondary-focus);
            }

            a.contrast,
            [role="link"].contrast {
                --color: var(--contrast);
            }

            a.contrast:is([aria-current], :hover, :active, :focus),
            [role="link"].contrast:is([aria-current], :hover, :active, :focus) {
                --color: var(--contrast-hover);
            }

            a.contrast:focus,
            [role="link"].contrast:focus {
                --background-color: var(--contrast-focus);
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                margin-top: 0;
                margin-bottom: var(--typography-spacing-vertical);
                color: var(--color);
                font-weight: var(--font-weight);
                font-size: var(--font-size);
                font-family: var(--font-family);
            }

            h1 {
                --color: var(--h1-color);
            }

            h2 {
                --color: var(--h2-color);
            }

            h3 {
                --color: var(--h3-color);
            }

            h4 {
                --color: var(--h4-color);
            }

            h5 {
                --color: var(--h5-color);
            }

            h6 {
                --color: var(--h6-color);
            }

            :where(address, blockquote, dl, figure, form, ol, p, pre, table, ul)~ :is(h1, h2, h3, h4, h5, h6) {
                margin-top: var(--typography-spacing-vertical);
            }

            hgroup,
            .headings {
                margin-bottom: var(--typography-spacing-vertical);
            }

            hgroup>*,
            .headings>* {
                margin-bottom: 0;
            }

            hgroup>*:last-child,
            .headings>*:last-child {
                --color: var(--muted-color);
                --font-weight: unset;
                font-size: 1rem;
                font-family: unset;
            }

            p {
                margin-bottom: var(--typography-spacing-vertical);
            }

            small {
                font-size: var(--font-size);
            }

            :where(dl, ol, ul) {
                padding-right: 0;
                padding-left: var(--spacing);
                -webkit-padding-start: var(--spacing);
                padding-inline-start: var(--spacing);
                -webkit-padding-end: 0;
                padding-inline-end: 0;
            }

            :where(dl, ol, ul) li {
                margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
            }

            :where(dl, ol, ul) :is(dl, ol, ul) {
                margin: 0;
                margin-top: calc(var(--typography-spacing-vertical) * 0.25);
            }

            ul li {
                list-style: square;
            }

            mark {
                padding: 0.125rem 0.25rem;
                background-color: var(--mark-background-color);
                color: var(--mark-color);
                vertical-align: baseline;
            }

            blockquote {
                display: block;
                margin: var(--typography-spacing-vertical) 0;
                padding: var(--spacing);
                border-right: none;
                border-left: 0.25rem solid var(--blockquote-border-color);
                -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
                border-inline-start: 0.25rem solid var(--blockquote-border-color);
                -webkit-border-end: none;
                border-inline-end: none;
            }

            blockquote footer {
                margin-top: calc(var(--typography-spacing-vertical) * 0.5);
                color: var(--blockquote-footer-color);
            }

            abbr[title] {
                border-bottom: 1px dotted;
                text-decoration: none;
                cursor: help;
            }

            ins {
                color: var(--ins-color);
                text-decoration: none;
            }

            del {
                color: var(--del-color);
            }

            ::-moz-selection {
                background-color: var(--primary-focus);
            }

            ::selection {
                background-color: var(--primary-focus);
            }

            /**
 * Embedded content
 */
            :where(audio, canvas, iframe, img, svg, video) {
                vertical-align: middle;
            }

            audio,
            video {
                display: inline-block;
            }

            audio:not([controls]) {
                display: none;
                height: 0;
            }

            :where(iframe) {
                border-style: none;
            }

            img {
                max-width: 100%;
                height: auto;
                border-style: none;
            }

            :where(svg:not([fill])) {
                fill: currentColor;
            }

            svg:not(#mount) {
                overflow: hidden;
            }

            /**
 * Button
 */
            button {
                margin: 0;
                overflow: visible;
                font-family: inherit;
                text-transform: none;
            }

            button,
            [type="button"],
            [type="reset"],
            [type="submit"] {
                -webkit-appearance: button;
            }

            button {
                display: block;
                width: 100%;
                margin-bottom: var(--spacing);
            }

            [role="button"] {
                display: inline-block;
                text-decoration: none;
            }

            button,
            input[type="submit"],
            input[type="button"],
            input[type="reset"],
            [role="button"] {
                --background-color: var(--primary);
                --border-color: var(--primary);
                --color: var(--primary-inverse);
                --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
                padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
                border: var(--border-width) solid var(--border-color);
                border-radius: var(--border-radius);
                outline: none;
                background-color: var(--background-color);
                box-shadow: var(--box-shadow);
                color: var(--color);
                font-weight: var(--font-weight);
                font-size: 1rem;
                line-height: var(--line-height);
                text-align: center;
                cursor: pointer;
                transition: background-color var(--transition), border-color var(--transition),
                    color var(--transition), box-shadow var(--transition);
            }

            button:is([aria-current], :hover, :active, :focus),
            input[type="submit"]:is([aria-current], :hover, :active, :focus),
            input[type="button"]:is([aria-current], :hover, :active, :focus),
            input[type="reset"]:is([aria-current], :hover, :active, :focus),
            [role="button"]:is([aria-current], :hover, :active, :focus) {
                --background-color: var(--primary-hover);
                --border-color: var(--primary-hover);
                --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
                --color: var(--primary-inverse);
            }

            button:focus,
            input[type="submit"]:focus,
            input[type="button"]:focus,
            input[type="reset"]:focus,
            [role="button"]:focus {
                --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
                    0 0 0 var(--outline-width) var(--primary-focus);
            }

            :is(button,
                input[type="submit"],
                input[type="button"],
                [role="button"]).secondary,
            input[type="reset"] {
                --background-color: var(--secondary);
                --border-color: var(--secondary);
                --color: var(--secondary-inverse);
                cursor: pointer;
            }

            :is(button,
                input[type="submit"],
                input[type="button"],
                [role="button"]).secondary:is([aria-current], :hover, :active, :focus),
            input[type="reset"]:is([aria-current], :hover, :active, :focus) {
                --background-color: var(--secondary-hover);
                --border-color: var(--secondary-hover);
                --color: var(--secondary-inverse);
            }

            :is(button,
                input[type="submit"],
                input[type="button"],
                [role="button"]).secondary:focus,
            input[type="reset"]:focus {
                --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
                    0 0 0 var(--outline-width) var(--secondary-focus);
            }

            :is(button,
                input[type="submit"],
                input[type="button"],
                [role="button"]).contrast {
                --background-color: var(--contrast);
                --border-color: var(--contrast);
                --color: var(--contrast-inverse);
            }

            :is(button,
                input[type="submit"],
                input[type="button"],
                [role="button"]).contrast:is([aria-current], :hover, :active, :focus) {
                --background-color: var(--contrast-hover);
                --border-color: var(--contrast-hover);
                --color: var(--contrast-inverse);
            }

            :is(button,
                input[type="submit"],
                input[type="button"],
                [role="button"]).contrast:focus {
                --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
                    0 0 0 var(--outline-width) var(--contrast-focus);
            }

            :is(button,
                input[type="submit"],
                input[type="button"],
                [role="button"]).outline,
            input[type="reset"].outline {
                --background-color: transparent;
                --color: var(--primary);
            }

            :is(button,
                input[type="submit"],
                input[type="button"],
                [role="button"]).outline:is([aria-current], :hover, :active, :focus),
            input[type="reset"].outline:is([aria-current], :hover, :active, :focus) {
                --background-color: transparent;
                --color: var(--primary-hover);
            }

            :is(button,
                input[type="submit"],
                input[type="button"],
                [role="button"]).outline.secondary,
            input[type="reset"].outline {
                --color: var(--secondary);
            }

            :is(button,
                input[type="submit"],
                input[type="button"],
                [role="button"]).outline.secondary:is([aria-current], :hover, :active, :focus),
            input[type="reset"].outline:is([aria-current], :hover, :active, :focus) {
                --color: var(--secondary-hover);
            }

            :is(button,
                input[type="submit"],
                input[type="button"],
                [role="button"]).outline.contrast {
                --color: var(--contrast);
            }

            :is(button,
                input[type="submit"],
                input[type="button"],
                [role="button"]).outline.contrast:is([aria-current], :hover, :active, :focus) {
                --color: var(--contrast-hover);
            }

            :where(button,
                [type="submit"],
                [type="button"],
                [type="reset"],
                [role="button"])[disabled],
            :where(fieldset[disabled]) :is(button,
                [type="submit"],
                [type="button"],
                [type="reset"],
                [role="button"]),
            a[role="button"]:not([href]) {
                opacity: 0.5;
                pointer-events: none;
            }

            /**
 * Form elements
 */
            input,
            optgroup,
            select,
            textarea {
                margin: 0;
                font-size: 1rem;
                line-height: var(--line-height);
                font-family: inherit;
                letter-spacing: inherit;
            }

            input {
                overflow: visible;
            }

            select {
                text-transform: none;
            }

            legend {
                max-width: 100%;
                padding: 0;
                color: inherit;
                white-space: normal;
            }

            textarea {
                overflow: auto;
            }

            [type="checkbox"],
            [type="radio"] {
                padding: 0;
            }

            ::-webkit-inner-spin-button,
            ::-webkit-outer-spin-button {
                height: auto;
            }

            [type="search"] {
                -webkit-appearance: textfield;
                outline-offset: -2px;
            }

            [type="search"]::-webkit-search-decoration {
                -webkit-appearance: none;
            }

            ::-webkit-file-upload-button {
                -webkit-appearance: button;
                font: inherit;
            }

            ::-moz-focus-inner {
                padding: 0;
                border-style: none;
            }

            :-moz-focusring {
                outline: none;
            }

            :-moz-ui-invalid {
                box-shadow: none;
            }

            ::-ms-expand {
                display: none;
            }

            [type="file"],
            [type="range"] {
                padding: 0;
                border-width: 0;
            }

            input:not([type="checkbox"], [type="radio"], [type="range"]) {
                height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
            }

            fieldset {
                margin: 0;
                margin-bottom: var(--spacing);
                padding: 0;
                border: 0;
            }

            label,
            fieldset legend {
                display: block;
                margin-bottom: calc(var(--spacing) * 0.25);
                font-weight: var(--form-label-font-weight, var(--font-weight));
            }

            input:not([type="checkbox"], [type="radio"]),
            select,
            textarea {
                width: 100%;
            }

            input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
            select,
            textarea {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
            }

            input,
            select,
            textarea {
                --background-color: var(--form-element-background-color);
                --border-color: var(--form-element-border-color);
                --color: var(--form-element-color);
                --box-shadow: none;
                border: var(--border-width) solid var(--border-color);
                border-radius: var(--border-radius);
                outline: none;
                background-color: var(--background-color);
                box-shadow: var(--box-shadow);
                color: var(--color);
                font-weight: var(--font-weight);
                transition: background-color var(--transition), border-color var(--transition),
                    color var(--transition), box-shadow var(--transition);
            }

            input:not([type="submit"],
                [type="button"],
                [type="reset"],
                [type="checkbox"],
                [type="radio"],
                [readonly]):is(:active, :focus),
            :where(select, textarea):is(:active, :focus) {
                --background-color: var(--form-element-active-background-color);
            }

            input:not([type="submit"],
                [type="button"],
                [type="reset"],
                [role="switch"],
                [readonly]):is(:active, :focus),
            :where(select, textarea):is(:active, :focus) {
                --border-color: var(--form-element-active-border-color);
            }

            input:not([type="submit"],
                [type="button"],
                [type="reset"],
                [type="range"],
                [type="file"],
                [readonly]):focus,
            select:focus,
            textarea:focus {
                --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
            }

            input:not([type="submit"], [type="button"], [type="reset"])[disabled],
            select[disabled],
            textarea[disabled],
            :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]),
                select,
                textarea) {
                --background-color: var(--form-element-disabled-background-color);
                --border-color: var(--form-element-disabled-border-color);
                opacity: var(--form-element-disabled-opacity);
                pointer-events: none;
            }

            :where(input, select, textarea):not([type="checkbox"],
                [type="radio"],
                [type="date"],
                [type="datetime-local"],
                [type="month"],
                [type="time"],
                [type="week"])[aria-invalid] {
                padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
                padding-left: var(--form-element-spacing-horizontal);
                -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
                padding-inline-start: var(--form-element-spacing-horizontal) !important;
                -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
                padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
                background-position: center right 0.75rem;
                background-size: 1rem auto;
                background-repeat: no-repeat;
            }

            :where(input, select, textarea):not([type="checkbox"],
                [type="radio"],
                [type="date"],
                [type="datetime-local"],
                [type="month"],
                [type="time"],
                [type="week"])[aria-invalid="false"] {
                background-image: var(--icon-valid);
            }

            :where(input, select, textarea):not([type="checkbox"],
                [type="radio"],
                [type="date"],
                [type="datetime-local"],
                [type="month"],
                [type="time"],
                [type="week"])[aria-invalid="true"] {
                background-image: var(--icon-invalid);
            }

            :where(input, select, textarea)[aria-invalid="false"] {
                --border-color: var(--form-element-valid-border-color);
            }

            :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
                --border-color: var(--form-element-valid-active-border-color) !important;
                --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
            }

            :where(input, select, textarea)[aria-invalid="true"] {
                --border-color: var(--form-element-invalid-border-color);
            }

            :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
                --border-color: var(--form-element-invalid-active-border-color) !important;
                --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
            }

            [dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid],
                [aria-invalid="true"],
                [aria-invalid="false"]) {
                background-position: center left 0.75rem;
            }

            input::placeholder,
            input::-webkit-input-placeholder,
            textarea::placeholder,
            textarea::-webkit-input-placeholder,
            select:invalid {
                color: var(--form-element-placeholder-color);
                opacity: 1;
            }

            input:not([type="checkbox"], [type="radio"]),
            select,
            textarea {
                margin-bottom: var(--spacing);
            }

            select::-ms-expand {
                border: 0;
                background-color: transparent;
            }

            select:not([multiple], [size]) {
                padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
                padding-left: var(--form-element-spacing-horizontal);
                -webkit-padding-start: var(--form-element-spacing-horizontal);
                padding-inline-start: var(--form-element-spacing-horizontal);
                -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
                padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
                background-image: var(--icon-chevron);
                background-position: center right 0.75rem;
                background-size: 1rem auto;
                background-repeat: no-repeat;
            }

            [dir="rtl"] select:not([multiple], [size]) {
                background-position: center left 0.75rem;
            }

            :where(input, select, textarea)+small {
                display: block;
                width: 100%;
                margin-top: calc(var(--spacing) * -0.75);
                margin-bottom: var(--spacing);
                color: var(--muted-color);
            }

            label> :where(input, select, textarea) {
                margin-top: calc(var(--spacing) * 0.25);
            }

            /**
 * Form elements
 * Checkboxes & Radios
 */
            [type="checkbox"],
            [type="radio"] {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                width: 1.25em;
                height: 1.25em;
                margin-top: -0.125em;
                margin-right: 0.375em;
                margin-left: 0;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
                -webkit-margin-end: 0.375em;
                margin-inline-end: 0.375em;
                border-width: var(--border-width);
                font-size: inherit;
                vertical-align: middle;
                cursor: pointer;
            }

            [type="checkbox"]::-ms-check,
            [type="radio"]::-ms-check {
                display: none;
            }

            [type="checkbox"]:checked,
            [type="checkbox"]:checked:active,
            [type="checkbox"]:checked:focus,
            [type="radio"]:checked,
            [type="radio"]:checked:active,
            [type="radio"]:checked:focus {
                --background-color: var(--primary);
                --border-color: var(--primary);
                background-image: var(--icon-checkbox);
                background-position: center;
                background-size: 0.75em auto;
                background-repeat: no-repeat;
            }

            [type="checkbox"]~label,
            [type="radio"]~label {
                display: inline-block;
                margin-right: 0.375em;
                margin-bottom: 0;
                cursor: pointer;
            }

            [type="checkbox"]:indeterminate {
                --background-color: var(--primary);
                --border-color: var(--primary);
                background-image: var(--icon-minus);
                background-position: center;
                background-size: 0.75em auto;
                background-repeat: no-repeat;
            }

            [type="radio"] {
                border-radius: 50%;
            }

            [type="radio"]:checked,
            [type="radio"]:checked:active,
            [type="radio"]:checked:focus {
                --background-color: var(--primary-inverse);
                border-width: 0.35em;
                background-image: none;
            }

            [type="checkbox"][role="switch"] {
                --background-color: var(--switch-background-color);
                --border-color: var(--switch-background-color);
                --color: var(--switch-color);
                width: 2.25em;
                height: 1.25em;
                border: var(--border-width) solid var(--border-color);
                border-radius: 1.25em;
                background-color: var(--background-color);
                line-height: 1.25em;
            }

            [type="checkbox"][role="switch"]:focus {
                --background-color: var(--switch-background-color);
                --border-color: var(--switch-background-color);
            }

            [type="checkbox"][role="switch"]:checked {
                --background-color: var(--switch-checked-background-color);
                --border-color: var(--switch-checked-background-color);
            }

            [type="checkbox"][role="switch"]:before {
                display: block;
                width: calc(1.25em - (var(--border-width) * 2));
                height: 100%;
                border-radius: 50%;
                background-color: var(--color);
                content: "";
                transition: margin 0.1s ease-in-out;
            }

            [type="checkbox"][role="switch"]:checked {
                background-image: none;
            }

            [type="checkbox"][role="switch"]:checked::before {
                margin-left: calc(1.125em - var(--border-width));
                -webkit-margin-start: calc(1.125em - var(--border-width));
                margin-inline-start: calc(1.125em - var(--border-width));
            }

            [type="checkbox"][aria-invalid="false"],
            [type="checkbox"]:checked[aria-invalid="false"],
            [type="radio"][aria-invalid="false"],
            [type="radio"]:checked[aria-invalid="false"],
            [type="checkbox"][role="switch"][aria-invalid="false"],
            [type="checkbox"][role="switch"]:checked[aria-invalid="false"] {
                --border-color: var(--form-element-valid-border-color);
            }

            [type="checkbox"][aria-invalid="true"],
            [type="checkbox"]:checked[aria-invalid="true"],
            [type="radio"][aria-invalid="true"],
            [type="radio"]:checked[aria-invalid="true"],
            [type="checkbox"][role="switch"][aria-invalid="true"],
            [type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
                --border-color: var(--form-element-invalid-border-color);
            }

            /**
 * Form elements
 * Alternatives input types (Not Checkboxes & Radios)
 */
            [type="color"]::-webkit-color-swatch-wrapper {
                padding: 0;
            }

            [type="color"]::-moz-focus-inner {
                padding: 0;
            }

            [type="color"]::-webkit-color-swatch {
                border: 0;
                border-radius: calc(var(--border-radius) * 0.5);
            }

            [type="color"]::-moz-color-swatch {
                border: 0;
                border-radius: calc(var(--border-radius) * 0.5);
            }

            input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"],
                [type="datetime-local"],
                [type="month"],
                [type="time"],
                [type="week"]) {
                --icon-position: 0.75rem;
                --icon-width: 1rem;
                padding-right: calc(var(--icon-width) + var(--icon-position));
                background-image: var(--icon-date);
                background-position: center right var(--icon-position);
                background-size: var(--icon-width) auto;
                background-repeat: no-repeat;
            }

            input:not([type="checkbox"],
                [type="radio"],
                [type="range"],
                [type="file"])[type="time"] {
                background-image: var(--icon-time);
            }

            [type="date"]::-webkit-calendar-picker-indicator,
            [type="datetime-local"]::-webkit-calendar-picker-indicator,
            [type="month"]::-webkit-calendar-picker-indicator,
            [type="time"]::-webkit-calendar-picker-indicator,
            [type="week"]::-webkit-calendar-picker-indicator {
                width: var(--icon-width);
                margin-right: calc(var(--icon-width) * -1);
                margin-left: var(--icon-position);
                opacity: 0;
            }

            [dir="rtl"] :is([type="date"],
                [type="datetime-local"],
                [type="month"],
                [type="time"],
                [type="week"]) {
                text-align: right;
            }

            [type="file"] {
                --color: var(--muted-color);
                padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
                border: 0;
                border-radius: 0;
                background: none;
            }

            [type="file"]::file-selector-button {
                --background-color: var(--secondary);
                --border-color: var(--secondary);
                --color: var(--secondary-inverse);
                margin-right: calc(var(--spacing) / 2);
                margin-left: 0;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
                -webkit-margin-end: calc(var(--spacing) / 2);
                margin-inline-end: calc(var(--spacing) / 2);
                padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
                border: var(--border-width) solid var(--border-color);
                border-radius: var(--border-radius);
                outline: none;
                background-color: var(--background-color);
                box-shadow: var(--box-shadow);
                color: var(--color);
                font-weight: var(--font-weight);
                font-size: 1rem;
                line-height: var(--line-height);
                text-align: center;
                cursor: pointer;
                transition: background-color var(--transition), border-color var(--transition),
                    color var(--transition), box-shadow var(--transition);
            }

            [type="file"]::file-selector-button:is(:hover, :active, :focus) {
                --background-color: var(--secondary-hover);
                --border-color: var(--secondary-hover);
            }

            [type="file"]::-webkit-file-upload-button {
                --background-color: var(--secondary);
                --border-color: var(--secondary);
                --color: var(--secondary-inverse);
                margin-right: calc(var(--spacing) / 2);
                margin-left: 0;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
                -webkit-margin-end: calc(var(--spacing) / 2);
                margin-inline-end: calc(var(--spacing) / 2);
                padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
                border: var(--border-width) solid var(--border-color);
                border-radius: var(--border-radius);
                outline: none;
                background-color: var(--background-color);
                box-shadow: var(--box-shadow);
                color: var(--color);
                font-weight: var(--font-weight);
                font-size: 1rem;
                line-height: var(--line-height);
                text-align: center;
                cursor: pointer;
                -webkit-transition: background-color var(--transition),
                    border-color var(--transition), color var(--transition),
                    box-shadow var(--transition);
                transition: background-color var(--transition), border-color var(--transition),
                    color var(--transition), box-shadow var(--transition);
            }

            [type="file"]::-webkit-file-upload-button:is(:hover, :active, :focus) {
                --background-color: var(--secondary-hover);
                --border-color: var(--secondary-hover);
            }

            [type="file"]::-ms-browse {
                --background-color: var(--secondary);
                --border-color: var(--secondary);
                --color: var(--secondary-inverse);
                margin-right: calc(var(--spacing) / 2);
                margin-left: 0;
                margin-inline-start: 0;
                margin-inline-end: calc(var(--spacing) / 2);
                padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
                border: var(--border-width) solid var(--border-color);
                border-radius: var(--border-radius);
                outline: none;
                background-color: var(--background-color);
                box-shadow: var(--box-shadow);
                color: var(--color);
                font-weight: var(--font-weight);
                font-size: 1rem;
                line-height: var(--line-height);
                text-align: center;
                cursor: pointer;
                -ms-transition: background-color var(--transition),
                    border-color var(--transition), color var(--transition),
                    box-shadow var(--transition);
                transition: background-color var(--transition), border-color var(--transition),
                    color var(--transition), box-shadow var(--transition);
            }

            [type="file"]::-ms-browse:is(:hover, :active, :focus) {
                --background-color: var(--secondary-hover);
                --border-color: var(--secondary-hover);
            }

            [type="range"] {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                width: 100%;
                height: 1.25rem;
                background: none;
            }

            [type="range"]::-webkit-slider-runnable-track {
                width: 100%;
                height: 0.25rem;
                border-radius: var(--border-radius);
                background-color: var(--range-border-color);
                -webkit-transition: background-color var(--transition),
                    box-shadow var(--transition);
                transition: background-color var(--transition), box-shadow var(--transition);
            }

            [type="range"]::-moz-range-track {
                width: 100%;
                height: 0.25rem;
                border-radius: var(--border-radius);
                background-color: var(--range-border-color);
                -moz-transition: background-color var(--transition),
                    box-shadow var(--transition);
                transition: background-color var(--transition), box-shadow var(--transition);
            }

            [type="range"]::-ms-track {
                width: 100%;
                height: 0.25rem;
                border-radius: var(--border-radius);
                background-color: var(--range-border-color);
                -ms-transition: background-color var(--transition),
                    box-shadow var(--transition);
                transition: background-color var(--transition), box-shadow var(--transition);
            }

            [type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: 1.25rem;
                height: 1.25rem;
                margin-top: -0.5rem;
                border: 2px solid var(--range-thumb-border-color);
                border-radius: 50%;
                background-color: var(--range-thumb-color);
                cursor: pointer;
                -webkit-transition: background-color var(--transition),
                    transform var(--transition);
                transition: background-color var(--transition), transform var(--transition);
            }

            [type="range"]::-moz-range-thumb {
                -webkit-appearance: none;
                width: 1.25rem;
                height: 1.25rem;
                margin-top: -0.5rem;
                border: 2px solid var(--range-thumb-border-color);
                border-radius: 50%;
                background-color: var(--range-thumb-color);
                cursor: pointer;
                -moz-transition: background-color var(--transition),
                    transform var(--transition);
                transition: background-color var(--transition), transform var(--transition);
            }

            [type="range"]::-ms-thumb {
                -webkit-appearance: none;
                width: 1.25rem;
                height: 1.25rem;
                margin-top: -0.5rem;
                border: 2px solid var(--range-thumb-border-color);
                border-radius: 50%;
                background-color: var(--range-thumb-color);
                cursor: pointer;
                -ms-transition: background-color var(--transition),
                    transform var(--transition);
                transition: background-color var(--transition), transform var(--transition);
            }

            [type="range"]:hover,
            [type="range"]:focus {
                --range-border-color: var(--range-active-border-color);
                --range-thumb-color: var(--range-thumb-hover-color);
            }

            [type="range"]:active {
                --range-thumb-color: var(--range-thumb-active-color);
            }

            [type="range"]:active::-webkit-slider-thumb {
                transform: scale(1.25);
            }

            [type="range"]:active::-moz-range-thumb {
                transform: scale(1.25);
            }

            [type="range"]:active::-ms-thumb {
                transform: scale(1.25);
            }

            input:not([type="checkbox"],
                [type="radio"],
                [type="range"],
                [type="file"])[type="search"] {
                -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
                padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
                border-radius: 5rem;
                background-image: var(--icon-search);
                background-position: center left 1.125rem;
                background-size: 1rem auto;
                background-repeat: no-repeat;
            }

            input:not([type="checkbox"],
                [type="radio"],
                [type="range"],
                [type="file"])[type="search"][aria-invalid] {
                -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
                padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
                background-position: center left 1.125rem, center right 0.75rem;
            }

            input:not([type="checkbox"],
                [type="radio"],
                [type="range"],
                [type="file"])[type="search"][aria-invalid="false"] {
                background-image: var(--icon-search), var(--icon-valid);
            }

            input:not([type="checkbox"],
                [type="radio"],
                [type="range"],
                [type="file"])[type="search"][aria-invalid="true"] {
                background-image: var(--icon-search), var(--icon-invalid);
            }

            [type="search"]::-webkit-search-cancel-button {
                -webkit-appearance: none;
                display: none;
            }

            [dir="rtl"] :where(input):not([type="checkbox"],
                [type="radio"],
                [type="range"],
                [type="file"])[type="search"] {
                background-position: center right 1.125rem;
            }

            [dir="rtl"] :where(input):not([type="checkbox"],
                [type="radio"],
                [type="range"],
                [type="file"])[type="search"][aria-invalid] {
                background-position: center right 1.125rem, center left 0.75rem;
            }

            /**
 * Table
 */
            :where(table) {
                width: 100%;
                border-collapse: collapse;
                border-spacing: 0;
                text-indent: 0;
            }

            th,
            td {
                padding: calc(var(--spacing) / 2) var(--spacing);
                border-bottom: var(--border-width) solid var(--table-border-color);
                color: var(--color);
                font-weight: var(--font-weight);
                font-size: var(--font-size);
                text-align: left;
                text-align: start;
            }

            tfoot th,
            tfoot td {
                border-top: var(--border-width) solid var(--table-border-color);
                border-bottom: 0;
            }

            table[role="grid"] tbody tr:nth-child(odd) {
                background-color: var(--table-row-stripped-background-color);
            }

            /**
 * Code
 */
            pre,
            code,
            kbd,
            samp {
                font-size: 0.875em;
                font-family: var(--font-family);
            }

            pre {
                -ms-overflow-style: scrollbar;
                overflow: auto;
            }

            pre,
            code,
            kbd {
                border-radius: var(--border-radius);
                background: var(--code-background-color);
                color: var(--code-color);
                font-weight: var(--font-weight);
                line-height: initial;
            }

            code,
            kbd {
                display: inline-block;
                padding: 0.375rem 0.5rem;
            }

            pre {
                display: block;
                margin-bottom: var(--spacing);
                overflow-x: auto;
            }

            pre>code {
                display: block;
                padding: var(--spacing);
                background: none;
                font-size: 14px;
                line-height: var(--line-height);
            }

            code b {
                color: var(--code-tag-color);
                font-weight: var(--font-weight);
            }

            code i {
                color: var(--code-property-color);
                font-style: normal;
            }

            code u {
                color: var(--code-value-color);
                text-decoration: none;
            }

            code em {
                color: var(--code-comment-color);
                font-style: normal;
            }

            kbd {
                background-color: var(--code-kbd-background-color);
                color: var(--code-kbd-color);
                vertical-align: baseline;
            }

            /**
 * Miscs
 */
            hr {
                height: 0;
                border: 0;
                border-top: 1px solid var(--muted-border-color);
                color: inherit;
            }

            [hidden],
            template {
                display: none !important;
            }

            canvas {
                display: inline-block;
            }

            /**
 * Accordion (<details>)
 */
            details {
                display: block;
                margin-bottom: var(--spacing);
                padding-bottom: var(--spacing);
                border-bottom: var(--border-width) solid var(--accordion-border-color);
            }

            details summary {
                line-height: 1rem;
                list-style-type: none;
                cursor: pointer;
                transition: color var(--transition);
            }

            details summary:not([role]) {
                color: var(--accordion-close-summary-color);
            }

            details summary::-webkit-details-marker {
                display: none;
            }

            details summary::marker {
                display: none;
            }

            details summary::-moz-list-bullet {
                list-style-type: none;
            }

            details summary::after {
                display: block;
                width: 1rem;
                height: 1rem;
                -webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
                margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
                float: right;
                transform: rotate(-90deg);
                background-image: var(--icon-chevron);
                background-position: right center;
                background-size: 1rem auto;
                background-repeat: no-repeat;
                content: "";
                transition: transform var(--transition);
            }

            details summary:focus {
                outline: none;
            }

            details summary:focus:not([role="button"]) {
                color: var(--accordion-active-summary-color);
            }

            details summary[role="button"] {
                width: 100%;
                text-align: left;
            }

            details summary[role="button"]::after {
                height: calc(1rem * var(--line-height, 1.5));
                background-image: var(--icon-chevron-button);
            }

            details summary[role="button"]:not(.outline).contrast::after {
                background-image: var(--icon-chevron-button-inverse);
            }

            details[open]>summary {
                margin-bottom: calc(var(--spacing));
            }

            details[open]>summary:not([role]):not(:focus) {
                color: var(--accordion-open-summary-color);
            }

            details[open]>summary::after {
                transform: rotate(0);
            }

            [dir="rtl"] details summary {
                text-align: right;
            }

            [dir="rtl"] details summary::after {
                float: left;
                background-position: left center;
            }

            /**
 * Card (<article>)
 */
            article {
                margin: var(--block-spacing-vertical) 0;
                padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
                border-radius: var(--border-radius);
                background: var(--card-background-color);
                box-shadow: var(--card-box-shadow);
            }

            article>header,
            article>footer {
                margin-right: calc(var(--block-spacing-horizontal) * -1);
                margin-left: calc(var(--block-spacing-horizontal) * -1);
                padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
                background-color: var(--card-sectionning-background-color);
            }

            article>header {
                margin-top: calc(var(--block-spacing-vertical) * -1);
                margin-bottom: var(--block-spacing-vertical);
                border-bottom: var(--border-width) solid var(--card-border-color);
                border-top-right-radius: var(--border-radius);
                border-top-left-radius: var(--border-radius);
            }

            article>footer {
                margin-top: var(--block-spacing-vertical);
                margin-bottom: calc(var(--block-spacing-vertical) * -1);
                border-top: var(--border-width) solid var(--card-border-color);
                border-bottom-right-radius: var(--border-radius);
                border-bottom-left-radius: var(--border-radius);
            }

            /**
 * Modal (<dialog>)
 */
            #mount {
                --scrollbar-width: 0px;
            }

            dialog {
                display: flex;
                z-index: 999;
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                align-items: center;
                justify-content: center;
                width: inherit;
                min-width: 100%;
                height: inherit;
                min-height: 100%;
                padding: var(--spacing);
                border: 0;
                -webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
                backdrop-filter: var(--modal-overlay-backdrop-filter);
                background-color: var(--modal-overlay-background-color);
                color: var(--color);
            }

            dialog article {
                max-height: calc(100vh - var(--spacing) * 2);
                overflow: auto;
            }

            @media (min-width: 576px) {
                dialog article {
                    max-width: 510px;
                }
            }

            @media (min-width: 768px) {
                dialog article {
                    max-width: 700px;
                }
            }

            dialog article>header,
            dialog article>footer {
                padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
            }

            dialog article>header .close {
                margin: 0;
                margin-left: var(--spacing);
                float: right;
            }

            dialog article>footer {
                text-align: right;
            }

            dialog article>footer [role="button"] {
                margin-bottom: 0;
            }

            dialog article>footer [role="button"]:not(:first-of-type) {
                margin-left: calc(var(--spacing) * 0.5);
            }

            dialog article p:last-of-type {
                margin: 0;
            }

            dialog article .close {
                display: block;
                width: 1rem;
                height: 1rem;
                margin-top: calc(var(--block-spacing-vertical) * -0.5);
                margin-bottom: var(--typography-spacing-vertical);
                margin-left: auto;
                background-image: var(--icon-close);
                background-position: center;
                background-size: auto 1rem;
                background-repeat: no-repeat;
                opacity: 0.5;
                transition: opacity var(--transition);
            }

            dialog article .close:is([aria-current], :hover, :active, :focus) {
                opacity: 1;
            }

            dialog:not([open]),
            dialog[open="false"] {
                display: none;
            }

            .modal-is-open {
                padding-right: var(--scrollbar-width, 0px);
                overflow: hidden;
                pointer-events: none;
            }

            .modal-is-open dialog {
                pointer-events: auto;
            }

            :where(.modal-is-opening, .modal-is-closing) dialog,
            :where(.modal-is-opening, .modal-is-closing) dialog>article {
                animation-duration: 0.2s;
                animation-timing-function: ease-in-out;
                animation-fill-mode: both;
            }

            :where(.modal-is-opening, .modal-is-closing) dialog {
                animation-duration: 0.8s;
                animation-name: modal-overlay;
            }

            :where(.modal-is-opening, .modal-is-closing) dialog>article {
                animation-delay: 0.2s;
                animation-name: modal;
            }

            .modal-is-closing dialog,
            .modal-is-closing dialog>article {
                animation-delay: 0s;
                animation-direction: reverse;
            }

            @keyframes modal-overlay {
                from {
                    -webkit-backdrop-filter: none;
                    backdrop-filter: none;
                    background-color: transparent;
                }
            }

            @keyframes modal {
                from {
                    transform: translateY(-100%);
                    opacity: 0;
                }
            }

            /**
 * Nav
 */
            :where(nav li)::before {
                float: left;
                content: "​";
            }

            nav,
            nav ul {
                display: flex;
            }

            nav {
                justify-content: space-between;
            }

            nav ol,
            nav ul {
                align-items: center;
                margin-bottom: 0;
                padding: 0;
                list-style: none;
            }

            nav ol:first-of-type,
            nav ul:first-of-type {
                margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
            }

            nav ol:last-of-type,
            nav ul:last-of-type {
                margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
            }

            nav li {
                display: inline-block;
                margin: 0;
                padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
            }

            nav li>* {
                --spacing: 0;
            }

            nav :where(a, [role="link"]) {
                display: inline-block;
                margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
                padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
                border-radius: var(--border-radius);
                text-decoration: none;
            }

            nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
                text-decoration: none;
            }

            nav[aria-label="breadcrumb"] {
                align-items: center;
                justify-content: start;
            }

            nav[aria-label="breadcrumb"] ul li:not(:first-child) {
                -webkit-margin-start: var(--nav-link-spacing-horizontal);
                margin-inline-start: var(--nav-link-spacing-horizontal);
            }

            nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after {
                position: absolute;
                width: calc(var(--nav-link-spacing-horizontal) * 2);
                -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
                margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
                content: "/";
                color: var(--muted-color);
                text-align: center;
            }

            nav[aria-label="breadcrumb"] a[aria-current] {
                background-color: transparent;
                color: inherit;
                text-decoration: none;
                pointer-events: none;
            }

            nav [role="button"] {
                margin-right: inherit;
                margin-left: inherit;
                padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
            }

            aside nav,
            aside ol,
            aside ul,
            aside li {
                display: block;
            }

            aside li {
                padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
            }

            aside li a {
                display: block;
            }

            aside li [role="button"] {
                margin: inherit;
            }

            [dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after {
                content: "\\";
            }

            /**
 * Progress
 */
            progress {
                display: inline-block;
                vertical-align: baseline;
            }

            progress {
                -webkit-appearance: none;
                -moz-appearance: none;
                display: inline-block;
                appearance: none;
                width: 100%;
                height: 0.5rem;
                margin-bottom: calc(var(--spacing) * 0.5);
                overflow: hidden;
                border: 0;
                border-radius: var(--border-radius);
                background-color: var(--progress-background-color);
                color: var(--progress-color);
            }

            progress::-webkit-progress-bar {
                border-radius: var(--border-radius);
                background: none;
            }

            progress[value]::-webkit-progress-value {
                background-color: var(--progress-color);
            }

            progress::-moz-progress-bar {
                background-color: var(--progress-color);
            }

            @media (prefers-reduced-motion: no-preference) {
                progress:indeterminate {
                    background: var(--progress-background-color) linear-gradient(to right,
                            var(--progress-color) 30%,
                            var(--progress-background-color) 30%) top left/150% 150% no-repeat;
                    animation: progress-indeterminate 1s linear infinite;
                }

                progress:indeterminate[value]::-webkit-progress-value {
                    background-color: transparent;
                }

                progress:indeterminate::-moz-progress-bar {
                    background-color: transparent;
                }
            }

            @media (prefers-reduced-motion: no-preference) {
                [dir="rtl"] progress:indeterminate {
                    animation-direction: reverse;
                }
            }

            @keyframes progress-indeterminate {
                0% {
                    background-position: 200% 0;
                }

                100% {
                    background-position: -200% 0;
                }
            }

            /**
 * Dropdown ([role="list"])
 */
            details[role="list"],
            li[role="list"] {
                position: relative;
            }

            details[role="list"] summary+ul,
            li[role="list"]>ul {
                display: flex;
                z-index: 99;
                position: absolute;
                top: auto;
                right: 0;
                left: 0;
                flex-direction: column;
                margin: 0;
                padding: 0;
                border: var(--border-width) solid var(--dropdown-border-color);
                border-radius: var(--border-radius);
                border-top-right-radius: 0;
                border-top-left-radius: 0;
                background-color: var(--dropdown-background-color);
                box-shadow: var(--card-box-shadow);
                color: var(--dropdown-color);
                white-space: nowrap;
            }

            details[role="list"] summary+ul li,
            li[role="list"]>ul li {
                width: 100%;
                margin-bottom: 0;
                padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
                list-style: none;
            }

            details[role="list"] summary+ul li:first-of-type,
            li[role="list"]>ul li:first-of-type {
                margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
            }

            details[role="list"] summary+ul li:last-of-type,
            li[role="list"]>ul li:last-of-type {
                margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
            }

            details[role="list"] summary+ul li a,
            li[role="list"]>ul li a {
                display: block;
                margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
                padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
                overflow: hidden;
                color: var(--dropdown-color);
                text-decoration: none;
                text-overflow: ellipsis;
            }

            details[role="list"] summary+ul li a:hover,
            li[role="list"]>ul li a:hover {
                background-color: var(--dropdown-hover-background-color);
            }

            details[role="list"] summary::after,
            li[role="list"]>a::after {
                display: block;
                width: 1rem;
                height: calc(1rem * var(--line-height, 1.5));
                -webkit-margin-start: 0.5rem;
                margin-inline-start: 0.5rem;
                float: right;
                transform: rotate(0deg);
                background-position: right center;
                background-size: 1rem auto;
                background-repeat: no-repeat;
                content: "";
            }

            details[role="list"] {
                padding: 0;
                border-bottom: none;
            }

            details[role="list"] summary {
                margin-bottom: 0;
            }

            details[role="list"] summary:not([role]) {
                height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
                padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
                border: var(--border-width) solid var(--form-element-border-color);
                border-radius: var(--border-radius);
                background-color: var(--form-element-background-color);
                color: var(--form-element-placeholder-color);
                line-height: inherit;
                cursor: pointer;
                transition: background-color var(--transition), border-color var(--transition),
                    color var(--transition), box-shadow var(--transition);
            }

            details[role="list"] summary:not([role]):active,
            details[role="list"] summary:not([role]):focus {
                border-color: var(--form-element-active-border-color);
                background-color: var(--form-element-active-background-color);
            }

            details[role="list"] summary:not([role]):focus {
                box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
            }

            details[role="list"][open] summary {
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
            }

            details[role="list"][open] summary::before {
                display: block;
                z-index: 1;
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background: none;
                content: "";
                cursor: default;
            }

            nav details[role="list"] summary,
            nav li[role="list"] a {
                display: flex;
                direction: ltr;
            }

            nav details[role="list"] summary+ul,
            nav li[role="list"]>ul {
                min-width: -moz-fit-content;
                min-width: fit-content;
                border-radius: var(--border-radius);
            }

            nav details[role="list"] summary+ul li a,
            nav li[role="list"]>ul li a {
                border-radius: 0;
            }

            nav details[role="list"] summary,
            nav details[role="list"] summary:not([role]) {
                height: auto;
                padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
            }

            nav details[role="list"][open] summary {
                border-radius: var(--border-radius);
            }

            nav details[role="list"] summary+ul {
                margin-top: var(--outline-width);
                -webkit-margin-start: 0;
                margin-inline-start: 0;
            }

            nav details[role="list"] summary[role="link"] {
                margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
                line-height: var(--line-height);
            }

            nav details[role="list"] summary[role="link"]+ul {
                margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
                -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
                margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
            }

            li[role="list"]:hover>ul,
            li[role="list"] a:active~ul,
            li[role="list"] a:focus~ul {
                display: flex;
            }

            li[role="list"]>ul {
                display: none;
                margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
                -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
                margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
            }

            li[role="list"]>a::after {
                background-image: var(--icon-chevron);
            }

            /**
 * Loading ([aria-busy=true])
 */
            [aria-busy="true"] {
                cursor: progress;
            }

            [aria-busy="true"]:not(input, select, textarea)::before {
                display: inline-block;
                width: 1em;
                height: 1em;
                border: 0.1875em solid currentColor;
                border-radius: 1em;
                border-right-color: transparent;
                content: "";
                vertical-align: text-bottom;
                vertical-align: -0.125em;
                animation: spinner 0.75s linear infinite;
                opacity: var(--loading-spinner-opacity);
            }

            [aria-busy="true"]:not(input, select, textarea):not(:empty)::before {
                margin-right: calc(var(--spacing) * 0.5);
                margin-left: 0;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
                -webkit-margin-end: calc(var(--spacing) * 0.5);
                margin-inline-end: calc(var(--spacing) * 0.5);
            }

            [aria-busy="true"]:not(input, select, textarea):empty {
                text-align: center;
            }

            button[aria-busy="true"],
            input[type="submit"][aria-busy="true"],
            input[type="button"][aria-busy="true"],
            input[type="reset"][aria-busy="true"],
            a[aria-busy="true"] {
                pointer-events: none;
            }

            @keyframes spinner {
                to {
                    transform: rotate(360deg);
                }
            }

            /**
 * Tooltip ([data-tooltip])
 */
            [data-tooltip] {
                position: relative;
            }

            [data-tooltip]:not(a, button, input) {
                border-bottom: 1px dotted;
                text-decoration: none;
                cursor: help;
            }

            [data-tooltip][data-placement="top"]::before,
            [data-tooltip][data-placement="top"]::after,
            [data-tooltip]::before,
            [data-tooltip]::after {
                display: block;
                z-index: 99;
                position: absolute;
                bottom: 100%;
                left: 50%;
                padding: 0.25rem 0.5rem;
                overflow: hidden;
                transform: translate(-50%, -0.25rem);
                border-radius: var(--border-radius);
                background: var(--tooltip-background-color);
                content: attr(data-tooltip);
                color: var(--tooltip-color);
                font-style: normal;
                font-weight: var(--font-weight);
                font-size: 0.875rem;
                text-decoration: none;
                text-overflow: ellipsis;
                white-space: nowrap;
                opacity: 0;
                pointer-events: none;
            }

            [data-tooltip][data-placement="top"]::after,
            [data-tooltip]::after {
                padding: 0;
                transform: translate(-50%, 0rem);
                border-top: 0.3rem solid;
                border-right: 0.3rem solid transparent;
                border-left: 0.3rem solid transparent;
                border-radius: 0;
                background-color: transparent;
                content: "";
                color: var(--tooltip-background-color);
            }

            [data-tooltip][data-placement="bottom"]::before,
            [data-tooltip][data-placement="bottom"]::after {
                top: 100%;
                bottom: auto;
                transform: translate(-50%, 0.25rem);
            }

            [data-tooltip][data-placement="bottom"]:after {
                transform: translate(-50%, -0.3rem);
                border: 0.3rem solid transparent;
                border-bottom: 0.3rem solid;
            }

            [data-tooltip][data-placement="left"]::before,
            [data-tooltip][data-placement="left"]::after {
                top: 50%;
                right: 100%;
                bottom: auto;
                left: auto;
                transform: translate(-0.25rem, -50%);
            }

            [data-tooltip][data-placement="left"]:after {
                transform: translate(0.3rem, -50%);
                border: 0.3rem solid transparent;
                border-left: 0.3rem solid;
            }

            [data-tooltip][data-placement="right"]::before,
            [data-tooltip][data-placement="right"]::after {
                top: 50%;
                right: auto;
                bottom: auto;
                left: 100%;
                transform: translate(0.25rem, -50%);
            }

            [data-tooltip][data-placement="right"]:after {
                transform: translate(-0.3rem, -50%);
                border: 0.3rem solid transparent;
                border-right: 0.3rem solid;
            }

            [data-tooltip]:focus::before,
            [data-tooltip]:focus::after,
            [data-tooltip]:hover::before,
            [data-tooltip]:hover::after {
                opacity: 1;
            }

            @media (hover: hover) and (pointer: fine) {

                [data-tooltip][data-placement="bottom"]:focus::before,
                [data-tooltip][data-placement="bottom"]:focus::after,
                [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::before,
                [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::after,
                [data-tooltip]:hover::before,
                [data-tooltip]:hover::after {
                    animation-duration: 0.2s;
                    animation-name: tooltip-slide-top;
                }

                [data-tooltip][data-placement="bottom"]:focus::after,
                [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::after,
                [data-tooltip]:hover::after {
                    animation-name: tooltip-caret-slide-top;
                }

                [data-tooltip][data-placement="bottom"]:focus::before,
                [data-tooltip][data-placement="bottom"]:focus::after,
                [data-tooltip][data-placement="bottom"]:hover::before,
                [data-tooltip][data-placement="bottom"]:hover::after {
                    animation-duration: 0.2s;
                    animation-name: tooltip-slide-bottom;
                }

                [data-tooltip][data-placement="bottom"]:focus::after,
                [data-tooltip][data-placement="bottom"]:hover::after {
                    animation-name: tooltip-caret-slide-bottom;
                }

                [data-tooltip][data-placement="left"]:focus::before,
                [data-tooltip][data-placement="left"]:focus::after,
                [data-tooltip][data-placement="left"]:hover::before,
                [data-tooltip][data-placement="left"]:hover::after {
                    animation-duration: 0.2s;
                    animation-name: tooltip-slide-left;
                }

                [data-tooltip][data-placement="left"]:focus::after,
                [data-tooltip][data-placement="left"]:hover::after {
                    animation-name: tooltip-caret-slide-left;
                }

                [data-tooltip][data-placement="right"]:focus::before,
                [data-tooltip][data-placement="right"]:focus::after,
                [data-tooltip][data-placement="right"]:hover::before,
                [data-tooltip][data-placement="right"]:hover::after {
                    animation-duration: 0.2s;
                    animation-name: tooltip-slide-right;
                }

                [data-tooltip][data-placement="right"]:focus::after,
                [data-tooltip][data-placement="right"]:hover::after {
                    animation-name: tooltip-caret-slide-right;
                }
            }

            @keyframes tooltip-slide-top {
                from {
                    transform: translate(-50%, 0.75rem);
                    opacity: 0;
                }

                to {
                    transform: translate(-50%, -0.25rem);
                    opacity: 1;
                }
            }

            @keyframes tooltip-caret-slide-top {
                from {
                    opacity: 0;
                }

                50% {
                    transform: translate(-50%, -0.25rem);
                    opacity: 0;
                }

                to {
                    transform: translate(-50%, 0rem);
                    opacity: 1;
                }
            }

            @keyframes tooltip-slide-bottom {
                from {
                    transform: translate(-50%, -0.75rem);
                    opacity: 0;
                }

                to {
                    transform: translate(-50%, 0.25rem);
                    opacity: 1;
                }
            }

            @keyframes tooltip-caret-slide-bottom {
                from {
                    opacity: 0;
                }

                50% {
                    transform: translate(-50%, -0.5rem);
                    opacity: 0;
                }

                to {
                    transform: translate(-50%, -0.3rem);
                    opacity: 1;
                }
            }

            @keyframes tooltip-slide-left {
                from {
                    transform: translate(0.75rem, -50%);
                    opacity: 0;
                }

                to {
                    transform: translate(-0.25rem, -50%);
                    opacity: 1;
                }
            }

            @keyframes tooltip-caret-slide-left {
                from {
                    opacity: 0;
                }

                50% {
                    transform: translate(0.05rem, -50%);
                    opacity: 0;
                }

                to {
                    transform: translate(0.3rem, -50%);
                    opacity: 1;
                }
            }

            @keyframes tooltip-slide-right {
                from {
                    transform: translate(-0.75rem, -50%);
                    opacity: 0;
                }

                to {
                    transform: translate(0.25rem, -50%);
                    opacity: 1;
                }
            }

            @keyframes tooltip-caret-slide-right {
                from {
                    opacity: 0;
                }

                50% {
                    transform: translate(-0.05rem, -50%);
                    opacity: 0;
                }

                to {
                    transform: translate(-0.3rem, -50%);
                    opacity: 1;
                }
            }

            /**
 * Accessibility & User interaction
 */
            [aria-controls] {
                cursor: pointer;
            }

            [aria-disabled="true"],
            [disabled] {
                cursor: not-allowed;
            }

            [aria-hidden="false"][hidden] {
                display: initial;
            }

            [aria-hidden="false"][hidden]:not(:focus) {
                clip: rect(0, 0, 0, 0);
                position: absolute;
            }

            a,
            area,
            button,
            input,
            label,
            select,
            summary,
            textarea,
            [tabindex] {
                -ms-touch-action: manipulation;
            }

            [dir="rtl"] {
                direction: rtl;
            }

            /**
* Reduce Motion Features
*/
            @media (prefers-reduced-motion: reduce) {

                *:not([aria-busy="true"]),
                :not([aria-busy="true"])::before,
                :not([aria-busy="true"])::after {
                    background-attachment: initial !important;
                    animation-duration: 1ms !important;
                    animation-delay: -1ms !important;
                    animation-iteration-count: 1 !important;
                    scroll-behavior: auto !important;
                    transition-delay: 0s !important;
                    transition-duration: 0s !important;
                }
            }

            #mount {
                /* --primary: rgb(227, 59, 126); */
                --primary: #ea4c89;
                --primary-hover: #f082ac;
                --icon-xia: url("");
                --switch-checked-background-color: var(--primary);
            }

            [data-theme="light"],
            #mount:not([data-theme="dark"]) {
                --primary: #e23c7c;
                --primary-hover: #f082ac;
            }

            [data-theme="dark"] {
                --primary: #e23c7c;
                --primary-hover: #f082ac;
            }

            [data-theme="light"] {
                --primary: #ea4c89;
                --primary-hover: #f082ac;
            }

            li.select-link.select-link:hover>ul {
                display: none;
            }

            li.select-link.select-link>ul {
                display: none;
            }

            li.select-link.select-link a:focus~ul {
                display: none;
            }

            li.select-link.select-link a:active~ul {
                display: none;
            }

            li.select-link-active.select-link-active>ul {
                display: flex;
            }

            li.select-link-active.select-link-active:hover>ul {
                display: flex;
            }

            li.select-link-active.select-link-active a:focus~ul {
                display: flex;
            }

            li.select-link-active.select-link-active a:active~ul {
                display: flex;
            }

            ul.select-link-ul.select-link-ul {
                right: 0px;
                left: auto;
            }

            a.select-link-selected {
                background-color: var(--primary-focus);
            }

            .immersive-translate-no-select {
                -webkit-touch-callout: none;
                /* iOS Safari */
                -webkit-user-select: none;
                /* Safari */
                -khtml-user-select: none;
                /* Konqueror HTML */
                -moz-user-select: none;
                /* Old versions of Firefox */
                -ms-user-select: none;
                /* Internet Explorer/Edge */
                user-select: none;
            }

            /* li[role="list"].no-arrow > a::after { */
            /*   background-image: none; */
            /*   width: 0; */
            /*   color: var(--color); */
            /* } */
            li[role="list"].no-arrow {
                margin-left: 8px;
                padding-right: 0;
            }

            li[role="list"]>a::after {
                -webkit-margin-start: 0.2rem;
                margin-inline-start: 0.2rem;
            }

            li[role="list"].no-arrow>a,
            li[role="list"].no-arrow>a:link,
            li[role="list"].no-arrow>a:visited {
                color: var(--secondary);
            }

            select.min-select {
                --form-element-spacing-horizontal: 0;
                margin-bottom: 4px;
                max-width: 128px;
                overflow: hidden;
                color: var(--primary);
                font-size: 13px;
                border: none;
                padding: 0;
                padding-right: 20px;
                padding-left: 8px;
                text-overflow: ellipsis;
                color: var(--color);
            }

            select.min-select-secondary {
                color: var(--color);
            }

            select.min-select:focus {
                outline: none;
                border: none;
                --box-shadow: none;
            }

            select.min-select-no-arrow {
                background-image: none;
                padding-right: 0;
            }

            select.min-select-left {
                padding-right: 0px;
                /* padding-left: 24px; */
                /* background-position: center left 0; */
                text-overflow: ellipsis;
                text-align: left;
            }

            .muted {
                color: var(--muted-color);
            }

            .select.button-select {
                --background-color: var(--secondary-hover);
                --border-color: var(--secondary-hover);
                --color: var(--secondary-inverse);
                cursor: pointer;
                --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
                padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
                border: var(--border-width) solid var(--border-color);
                border-radius: var(--border-radius);
                outline: none;
                background-color: var(--background-color);
                box-shadow: var(--box-shadow);
                color: var(--color);
                font-weight: var(--font-weight);
                font-size: 16px;
                line-height: var(--line-height);
                text-align: center;
                cursor: pointer;
                transition: background-color var(--transition), border-color var(--transition),
                    color var(--transition), box-shadow var(--transition);
                -webkit-appearance: button;
                margin: 0;
                margin-bottom: 0px;
                overflow: visible;
                font-family: inherit;
                text-transform: none;
            }

            body {
                padding: 0;
                margin: 0 auto;
                min-width: 268px;
                border-radius: 10px;
            }

            .popup-container {
                font-size: 16px;
                --font-size: 16px;
                color: #666;
                background-color: var(--popup-footer-background-color);
                width: 316px;
                min-width: 316px;
            }

            .popup-content {
                background-color: var(--popup-content-background-color);
                border-radius: 0px 0px 12px 12px;
                padding: 16px 20px;
            }

            .immersive-translate-popup-overlay {
                position: fixed;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                touch-action: none;
            }

            .immersive-translate-popup-wrapper {
                background: var(--background-color);
                border-radius: 10px;
                border: 1px solid var(--muted-border-color);
            }

            #mount {
                --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
                    "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
                    "Segoe UI Symbol", "Noto Color Emoji";
                --line-height: 1.5;
                --font-weight: 400;
                --font-size: 16px;
                --border-radius: 4px;
                --border-width: 1px;
                --outline-width: 3px;
                --spacing: 16px;
                --typography-spacing-vertical: 24px;
                --block-spacing-vertical: calc(var(--spacing) * 2);
                --block-spacing-horizontal: var(--spacing);
                --grid-spacing-vertical: 0;
                --grid-spacing-horizontal: var(--spacing);
                --form-element-spacing-vertical: 12px;
                --form-element-spacing-horizontal: 16px;
                --nav-element-spacing-vertical: 16px;
                --nav-element-spacing-horizontal: 8px;
                --nav-link-spacing-vertical: 8px;
                --nav-link-spacing-horizontal: 8px;
                --form-label-font-weight: var(--font-weight);
                --transition: 0.2s ease-in-out;
                --modal-overlay-backdrop-filter: blur(4px);
            }

            [data-theme="light"],
            #mount:not([data-theme="dark"]) {
                --popup-footer-background-color: #e8eaeb;
                --popup-content-background-color: #ffffff;
                --popup-item-background-color: #f3f5f6;
                --popup-item-hover-background-color: #eaeced;
                --popup-trial-pro-background-color: #f9fbfc;
                --text-black-2: #222222;
                --text-gray-2: #222222;
                --text-gray-6: #666666;
                --text-gray-9: #999999;
                --text-gray-c2: #c2c2c2;
                --service-select-content-shadow: 0px 2px 12px 0px rgba(75, 76, 77, 0.2);
                --service-select-border-color: #fafafa;
                --service-select-selected-background-color: #f3f5f6;
                --download-app-background: #f3f5f6;
            }

            @media only screen and (prefers-color-scheme: dark) {
                #mount:not([data-theme="light"]) {
                    --popup-footer-background-color: #0d0d0d;
                    --popup-content-background-color: #191919;
                    --popup-item-background-color: #272727;
                    --popup-item-hover-background-color: #333333;
                    --popup-trial-pro-background-color: #222222;
                    --text-black-2: #ffffff;
                    --text-gray-2: #dbdbdb;
                    --text-gray-6: #b3b3b3;
                    --text-gray-9: #777777;
                    --text-gray-c2: #5b5b5b;
                    --service-select-content-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.9);
                    --service-select-border-color: #2c2c2c;
                    --service-select-selected-background-color: #333333;
                    --download-app-background: #333;
                }
            }

            [data-theme="dark"] {
                --popup-footer-background-color: #0d0d0d;
                --popup-content-background-color: #191919;
                --popup-item-background-color: #272727;
                --popup-item-hover-background-color: #333333;
                --popup-trial-pro-background-color: #222222;
                --text-black-2: #ffffff;
                --text-gray-2: #dbdbdb;
                --text-gray-6: #b3b3b3;
                --text-gray-9: #777777;
                --text-gray-c2: #5b5b5b;
                --service-select-content-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.9);
                --service-select-border-color: #2c2c2c;
                --service-select-selected-background-color: #333333;
                --download-app-background: #333;
            }

            .text-balck {
                color: var(--text-black-2);
            }

            .text-gray-2 {
                color: var(--text-gray-2);
            }

            .text-gray-6 {
                color: var(--text-gray-6);
            }

            .text-gray-9 {
                color: var(--text-gray-9);
            }

            .text-gray-c2 {
                color: var(--text-gray-c2);
            }

            #mount {
                min-width: 268px;
            }

            .main-button {
                font-size: 15px;
                vertical-align: middle;
                border-radius: 12px;
                padding: unset;
                height: 44px;
                line-height: 44px;
            }

            .pt-4 {
                padding-top: 16px;
            }

            .p-2 {
                padding: 8px;
            }

            .pl-5 {
                padding-left: 48px;
            }

            .p-0 {
                padding: 0;
            }

            .pl-2 {
                padding-left: 8px;
            }

            .pl-4 {
                padding-left: 24px;
            }

            .pt-2 {
                padding-top: 8px;
            }

            .pb-2 {
                padding-bottom: 8px;
            }

            .pb-4 {
                padding-bottom: 16px;
            }

            .pb-5 {
                padding-bottom: 20px;
            }

            .pr-5 {
                padding-right: 48px;
            }

            .text-sm {
                font-size: 13px;
            }

            .text-base {
                font-size: 16px;
            }

            .w-full {
                width: 100%;
            }

            .flex {
                display: flex;
            }

            .flex-row {
                flex-direction: row;
            }

            .flex-wrap {
                flex-wrap: wrap;
            }

            .flex-end {
                justify-content: flex-end;
            }

            .flex-grow {
                flex-grow: 1;
            }

            .justify-between {
                justify-content: space-between;
            }

            .mb-0 {
                margin-bottom: 0px;
            }

            .mb-2 {
                margin-bottom: 8px;
            }

            .mb-4 {
                margin-bottom: 16px;
            }

            .mb-3 {
                margin-bottom: 12px;
            }

            .inline-block {
                display: inline-block;
            }

            .py-2 {
                padding-top: 8px;
                padding-bottom: 8px;
            }

            .py-2-5 {
                padding-top: 6px;
                padding-bottom: 6px;
            }

            .mt-0 {
                margin-top: 0;
            }

            .mt-2 {
                margin-top: 8px;
            }

            .mt-3 {
                margin-top: 12px;
            }

            .mt-4 {
                margin-top: 16px;
            }

            .mt-5 {
                margin-top: 20px;
            }

            .mt-6 {
                margin-top: 24px;
            }

            .mb-1 {
                margin-bottom: 4px;
            }

            .ml-4 {
                margin-left: 24px;
            }

            .ml-3 {
                margin-left: 16px;
            }

            .ml-2 {
                margin-left: 8px;
            }

            .ml-1 {
                margin-left: 4px;
            }

            .mr-1 {
                margin-right: 4px;
            }

            .mr-2 {
                margin-right: 8px;
            }

            .mr-3 {
                margin-right: 16px;
            }

            .mx-2 {
                margin-left: 8px;
                margin-right: 8px;
            }

            .pl-3 {
                padding-left: 12px;
            }

            .pr-3 {
                padding-right: 12px;
            }

            .p-3 {
                padding: 12px;
            }

            .px-1 {
                padding-left: 4px;
                padding-right: 4px;
            }

            .px-3 {
                padding-left: 12px;
                padding-right: 12px;
            }

            .pt-3 {
                padding-top: 12px;
            }

            .px-6 {
                padding-left: 18px;
                padding-right: 18px;
            }

            .px-4 {
                padding-left: 16px;
                padding-right: 16px;
            }

            .pt-6 {
                padding-top: 20px;
            }

            .py-3 {
                padding-top: 12px;
                padding-bottom: 12px;
            }

            .py-0 {
                padding-top: 0;
                padding-bottom: 0;
            }

            .left-auto {
                left: auto !important;
            }

            .max-h-28 {
                max-height: 112px;
            }

            .max-h-30 {
                max-height: 120px;
            }

            .overflow-y-scroll {
                overflow-y: scroll;
            }

            .text-xs {
                font-size: 12px;
            }

            .flex-1 {
                flex: 1;
            }

            .flex-3 {
                flex: 3;
            }

            .flex-4 {
                flex: 4;
            }

            .flex-2 {
                flex: 2;
            }

            .items-center {
                align-items: center;
            }

            .max-content {
                width: max-content;
            }

            .justify-center {
                justify-content: center;
            }

            .items-end {
                align-items: flex-end;
            }

            .items-baseline {
                align-items: baseline;
            }

            .my-5 {
                margin-top: 48px;
                margin-bottom: 48px;
            }

            .my-4 {
                margin-top: 24px;
                margin-bottom: 24px;
            }

            .my-3 {
                margin-top: 16px;
                margin-bottom: 16px;
            }

            .pt-3 {
                padding-top: 12px;
            }

            .px-3 {
                padding-left: 12px;
                padding-right: 12px;
            }

            .pt-2 {
                padding-top: 8px;
            }

            .px-2 {
                padding-left: 8px;
                padding-right: 8px;
            }

            .pt-1 {
                padding-top: 4px;
            }

            .px-1 {
                padding-left: 4px;
                padding-right: 4px;
            }

            .pb-2 {
                padding-bottom: 8px;
            }

            .justify-end {
                justify-content: flex-end;
            }

            .w-auto {
                width: auto;
            }

            .shrink-0 {
                flex-shrink: 0;
            }

            select.language-select,
            select.translate-service,
            select.min-select {
                --form-element-spacing-horizontal: 0;
                margin-bottom: 0px;
                max-width: unset;
                flex: 1;
                overflow: hidden;
                font-size: 13px;
                border: none;
                border-radius: 8px;
                padding-right: 30px;
                padding-left: 0px;
                background-position: center right 12px;
                background-size: 16px auto;
                background-image: var(--icon-xia);
                text-overflow: ellipsis;
                color: var(--text-gray-2);
                background-color: transparent;
                box-shadow: unset !important;
                cursor: pointer;
            }

            select.more {
                background-position: center right;
                padding-right: 20px;
            }

            select.transform-padding-left {
                padding-left: 12px;
                transform: translateX(-12px);
                background-position: center right 0px;
            }

            select.translate-service {
                color: var(--text-black-2);
            }

            /* dark use black, for windows */
            @media (prefers-color-scheme: dark) {

                select.language-select option,
                select.translate-service option,
                select.min-select option {
                    background-color: #666666;
                }
            }

            .text-overflow-ellipsis {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .max-w-20 {
                max-width: 180px;
                white-space: nowrap;
            }

            select.min-select-secondary {
                color: var(--color);
            }

            select.min-select:focus {
                outline: none;
                border: none;
                --box-shadow: none;
            }

            select.min-select-no-arrow {
                background-image: none;
                padding-right: 0;
            }

            select.min-select-left {
                padding-right: 0px;
                /* padding-left: 24px; */
                /* background-position: center left 0; */
                text-overflow: ellipsis;
                text-align: left;
            }

            .popup-footer {
                background-color: var(--popup-footer-background-color);
                height: 40px;
            }

            .text-right {
                text-align: right;
            }

            .clickable {
                cursor: pointer;
            }

            .close {
                cursor: pointer;
                width: 16px;
                height: 16px;
                background-image: var(--icon-close);
                background-position: center;
                background-size: auto 1rem;
                background-repeat: no-repeat;
                opacity: 0.5;
                transition: opacity var(--transition);
            }

            .padding-two-column {
                padding-left: 40px;
                padding-right: 40px;
            }

            .muted {
                color: #999;
            }

            .text-label {
                color: #666;
            }

            .display-none {
                display: none;
            }

            /* dark use #18232c */
            @media (prefers-color-scheme: dark) {
                .text-label {
                    color: #9ca3af;
                }
            }

            .text-decoration-none {
                text-decoration: none;
            }

            .text-decoration-none:is([aria-current], :hover, :active, :focus),
            [role="link"]:is([aria-current], :hover, :active, :focus) {
                --text-decoration: none !important;
                background-color: transparent !important;
            }

            .language-select-container {
                position: relative;
                width: 100%;
                background-color: var(--popup-item-background-color);
                height: 55px;
                border-radius: 12px;
            }

            select.language-select {
                color: var(--text-black-2);
                font-size: 14px;
                padding: 8px 24px 24px 16px;
                position: absolute;
                border-radius: 12px;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }

            select.text-gray-6 {
                color: var(--text-gray-6);
            }

            .language-select-container label {
                position: absolute;
                bottom: 10px;
                left: 16px;
                font-size: 12px;
                color: var(--text-gray-9);
                line-height: 12px;
                margin: 0;
            }

            .translation-service-container {
                background-color: var(--popup-item-background-color);
                border-radius: 12px;
            }

            .min-select-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 44px;
                background-color: var(--popup-item-background-color);
                padding-left: 16px;
            }

            .min-select-container:first-child {
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }

            .min-select-container:last-child {
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }

            .min-select-container:only-child {
                border-radius: 10px;
            }

            .translate-mode {
                width: 44px;
                height: 44px;
                border-radius: 22px;
                background-color: var(--popup-item-background-color);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                cursor: pointer;
            }

            .translate-mode svg {
                fill: var(--text-gray-2);
            }

            .widgets-container {
                display: flex;
                align-items: stretch;
                justify-content: space-between;
                width: 100%;
                gap: 9px;
            }

            /* 当只有两个小组件时的样式优化 */
            .widgets-container.widgets-two-items {
                gap: 16px;
            }

            .widgets-container.widgets-two-items .widget-item {
                flex: 0 1 auto;
                min-width: 93px;
                max-width: 120px;
            }

            .widget-item {
                display: flex;
                max-width: 93px;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                background-color: var(--popup-item-background-color);
                font-size: 12px;
                min-height: 44px;
                height: 100%;
                border-radius: 8px;
                cursor: pointer;
                flex: 1;
                padding: 8px 4px;
                text-align: center;
            }

            .widget-icon-text {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: var(--text-gray-2);
            }

            .widgets-container svg {
                fill: var(--text-gray-2);
                color: var(--text-gray-2);
            }

            .share-button-container {
                display: flex;
                align-items: center;
                cursor: pointer;
                padding: 2px 3px 0 8px;
            }

            .share-button-container svg {
                fill: var(--text-gray-9);
            }

            .min-select-container:hover,
            .language-select-container:hover,
            .widget-item:hover,
            .translate-mode:hover {
                background-color: var(--popup-item-hover-background-color);
            }

            .main-button:hover {
                background-color: #f5508f;
            }

            .share-button-container:hover {
                background-color: var(--popup-item-background-color);
                border-radius: 6px;
            }

            .error-boundary {
                background: #fff2f0;
                border: 1px solid #ffccc7;
                display: flex;
                padding: 12px;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.88);
                word-break: break-all;
                margin: 12px;
                border-radius: 12px;
                flex-direction: column;
            }

            .upgrade-pro {
                border-radius: 11px;
                background: linear-gradient(57deg, #272727 19.8%, #696969 82.2%);
                padding: 2px 8px;
                transform: scale(0.85);
            }

            .upgrade-pro span {
                background: linear-gradient(180deg, #ffeab4 17.65%, #f8c235 85.29%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: 12px;
                margin-left: 4px;
            }

            .upgrade-pro svg {
                margin-top: -2px;
            }

            .upgrade-pro:hover {
                background: linear-gradient(57deg, #3d3d3d 19.8%, #949494 82.2%);
            }

            .border-bottom-radius-0 {
                border-bottom-left-radius: 0 !important;
                border-bottom-right-radius: 0 !important;
            }

            .trial-pro-container {
                border-radius: 0px 0px 12px 12px;
                background: var(--popup-trial-pro-background-color);
                display: flex;
                align-items: center;
                height: 44px;
                padding-left: 16px;
                padding-right: 12px;
                font-size: 12px;
            }

            .trial-pro-container label {
                line-height: 13px;
                color: var(--text-black-2);
            }

            .trial-pro-container img {
                margin-left: 5px;
            }

            .cursor-pointer {
                cursor: pointer;
            }

            .upgrade-pro-discount-act {
                height: 25px;
                display: flex;
                padding: 0 4px;
                align-items: center;
                border-radius: 15px;
                background: linear-gradient(90deg,
                        #cefbfa 11.33%,
                        #d7f56f 63.75%,
                        #fccd5e 100%);
                transform: scale(0.9);
                box-shadow: 0px 1.8px 3.6px 0px rgba(0, 0, 0, 0.1);
                cursor: pointer;
            }

            .upgrade-pro-discount-act span {
                font-size: 12px;
                font-weight: 700;
                margin-left: 4px;
                color: #222222;
            }

            .upgrade-pro-discount-act:hover {
                text-decoration: unset;
                background: linear-gradient(90deg,
                        #e2fffe 11.33%,
                        #e6ff91 63.75%,
                        #ffdf93 100%);
            }

            .custom-select-container {
                width: 200px;
                position: relative;
                flex: 1;
            }

            #translation-service-select {
                padding-right: 12px;
                padding-left: 6px;
            }

            .custom-select-content {
                border-radius: 12px;
                background: var(--popup-content-background-color);
                box-shadow: var(--service-select-content-shadow);
                border: 1px solid var(--service-select-border-color);
                padding: 4px 5px;
                position: absolute;
                left: 0;
                right: 0;
                z-index: 100;
                overflow-y: auto;
            }

            .custom-select-item.default {
                width: 100%;
                padding: 0;
            }

            .custom-select-item {
                font-size: 13px;
                padding: 5px 6px;
                border-radius: 8px;
                display: flex;
                align-items: center;
                cursor: pointer;
                color: var(--text-black-2);
                width: auto;
                overflow: hidden;
                height: 30px;
                line-height: 30px;
            }

            .custom-select-item-img {
                width: 20px;
                height: 20px;
                margin-right: 4px;
            }

            @media (prefers-color-scheme: dark) {
                .custom-select-item-img {
                    margin-right: 6px;
                }
            }

            .custom-select-content .custom-select-item.selected,
            .custom-select-content .custom-select-item:hover {
                background: var(--service-select-selected-background-color);
            }

            .custom-select-item>span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .custom-select-item-pro {
                font-size: 12px;
                margin-left: 6px;
            }

            .custom-select-item-pro img {
                margin: 0 3px;
                width: 20px;
            }

            .custom-select-group-header {
                font-size: 12px;
                font-weight: 500;
                color: var(--text-gray-9);
                padding: 6px 8px 4px;
                margin-top: 2px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .more-container {
                position: relative;
            }

            .new-menu-indicator {
                position: absolute;
                width: 8px;
                height: 8px;
                background-color: #ef3434;
                border-radius: 50%;
                right: 18px;
                top: 4px;
            }

            .download-app {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                border-radius: 8px;
                background: var(--download-app-background);
                padding: 4px 8px;
                color: var(--text-gray-6);
                font-size: 12px;
                cursor: pointer;
                transition: all 0.2s ease-in-out;
            }

            /* Popup 动画效果 */
            @keyframes popup-fade-in {
                from {
                    opacity: 0;
                    transform: translateY(10px) scale(0.95);
                }

                to {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }
            }

            @keyframes popup-fade-out {
                from {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }

                to {
                    opacity: 0;
                    transform: translateY(10px) scale(0.95);
                }
            }

            .popup-generic-content {
                animation: popup-fade-in 0.2s ease-out;
            }

            .popup-generic-content.hiding {
                animation: popup-fade-out 0.15s ease-in;
            }

            html {
                font-size: 17px;
            }

            @media print {
                .imt-fb-container {
                    display: none !important;
                }
            }

            #mount#mount {
                position: absolute;
                display: none;
                min-width: 250px;
                height: auto;
                --font-size: 17px;
                font-size: 17px;
            }

            /* float-ball */
            .imt-fb-container {
                position: fixed;
                padding: 0;
                top: 335px;
                width: fit-content;
                display: flex;
                flex-direction: column;
                display: none;
                direction: ltr;
            }

            .imt-fb-container.left {
                align-items: flex-start;
                left: 0;
            }

            .imt-fb-container.right {
                align-items: flex-end;
                right: 0;
            }

            .imt-fb-btn {
                cursor: pointer;
                background: var(--float-ball-more-button-background-color);
                height: 36px;
                width: 56px;
                box-shadow: 2px 6px 10px 0px #0e121629;
            }

            .imt-fb-btn.left {
                border-top-right-radius: 36px;
                border-bottom-right-radius: 36px;
            }

            .imt-fb-btn.right {
                border-top-left-radius: 36px;
                border-bottom-left-radius: 36px;
            }

            .imt-fb-btn div {
                background: var(--float-ball-more-button-background-color);
                height: 36px;
                width: 54px;
                display: flex;
                align-items: center;
            }

            .imt-fb-btn.left div {
                border-top-right-radius: 34px;
                border-bottom-right-radius: 34px;
                justify-content: flex-end;
            }

            .imt-fb-btn.right div {
                border-top-left-radius: 34px;
                border-bottom-left-radius: 34px;
            }

            .imt-fb-logo-img {
                width: 20px;
                height: 20px;
                margin: 0 10px;
            }

            .imt-fb-logo-img-big-bg {
                width: 28px;
                height: 28px;
                margin: 0;
                padding: 4px;
                background-color: #ed6d8f;
                border-radius: 50%;
                margin: 0 5px;
            }

            .imt-float-ball-translated {
                position: absolute;
                width: 11px;
                height: 11px;
                bottom: 4px;
                right: 20px;
            }

            .btn-animate {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
                -webkit-transition: -webkit-transform ease-out 250ms;
                transition: -webkit-transform ease-out 250ms;
                transition: transform ease-out 250ms;
                transition: transform ease-out 250ms, -webkit-transform ease-out 250ms;
            }

            .imt-fb-setting-btn {
                margin-right: 18px;
                width: 28px;
                height: 28px;
            }

            .immersive-translate-popup-wrapper {
                background: var(--background-color);
                border-radius: 20px;
                box-shadow: 2px 10px 24px 0px #0e121614;
                border: none;
            }

            .popup-container {
                border-radius: 20px;
            }

            .popup-content {
                border-radius: 20px 20px 12px 12px;
            }

            .popup-footer {
                border-radius: 20px;
            }

            .imt-fb-close-button {
                pointer-events: all;
                cursor: pointer;
                position: absolute;
                margin-top: -10px;
            }

            .imt-fb-close-content {
                padding: 22px;
                width: 320px;
                pointer-events: all;
            }

            .imt-fb-close-title {
                font-weight: 500;
                color: var(--h2-color);
            }

            .imt-fb-close-radio-content {
                background-color: var(--background-light-green);
                padding: 8px 20px;
            }

            .imt-fb-radio-sel,
            .imt-fb-radio-nor {
                width: 16px;
                height: 16px;
                border-radius: 8px;
                flex-shrink: 0;
            }

            .imt-fb-radio-sel {
                border: 2px solid var(--primary);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .imt-fb-radio-sel div {
                width: 8px;
                height: 8px;
                border-radius: 4px;
                background-color: var(--primary);
            }

            .imt-fb-radio-nor {
                border: 2px solid #d3d4d6;
            }

            .imt-fb-primary-btn {
                background-color: var(--primary);
                width: 72px;
                height: 32px;
                color: white;
                border-radius: 8px;
                text-align: center;
                line-height: 32px;
                font-size: 16px;
                cursor: pointer;
            }

            .imt-fb-default-btn {
                border: 1px solid var(--primary);
                width: 72px;
                height: 32px;
                border-radius: 8px;
                color: var(--primary);
                line-height: 32px;
                text-align: center;
                font-size: 16px;
                cursor: pointer;
            }

            .imt-fb-guide-container {
                width: 312px;
                transform: translateY(-45%);
            }

            .imt-fb-guide-bg {
                position: absolute;
                left: 30px;
                right: 0;
                top: 0;
                bottom: 0;
                z-index: -1;
                height: 100%;
                width: 90%;
            }

            .imt-fb-guide-bg.left {
                transform: scaleX(-1);
            }

            .imt-fb-guide-content {
                margin: 16px -30px 80px 0px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .imt-fb-guide-content.left {
                margin: 16px 21px 60px 32px;
            }

            .imt-fb-guide-img {
                width: 220px;
                height: 112px;
            }

            .imt-fb-guide-message {
                font-size: 14px;
                line-height: 28px;
                color: #333333;
                white-space: pre-wrap;
                text-align: center;
                font-weight: 700;
                margin-bottom: 20px;
            }

            .imt-manga-guide-message {
                font-size: 16px;
                line-height: 24px;
                color: #333333;
                text-align: center;
                font-weight: 500;
                margin-bottom: 12px;
            }

            .imt-fb-guide-button {
                margin-top: 16px;
                line-height: 40px;
                height: 40px;
                padding: 0 20px;
                width: unset;
            }

            .imt-fb-more-buttons {
                box-shadow: 0px 2px 10px 0px #00000014;
                border: none;
                background: var(--float-ball-more-button-background-color);
                width: 36px;
                display: flex;
                flex-direction: column;
                border-radius: 18px;
                margin-top: 0px;
                padding: 7px 0 7px 0;
            }

            .imt-fb-more-buttons>div {
                margin: auto;
            }

            .imt-fb-side,
            .imt-fb-reward {
                border-radius: 50%;
                cursor: pointer;
                pointer-events: all;
                position: relative;
            }

            .imt-fb-side {
                margin: 10px 0;
            }

            .imt-fb-new-badge {
                width: 26px;
                height: 14px;
                padding: 3px;
                background-color: #f53f3f;
                border-radius: 4px;
                position: absolute;
                top: -5px;
                right: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .imt-fb-side *,
            .imt-fb-reward * {
                pointer-events: all;
            }

            .imt-fb-more-button {
                width: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }

            /* Sheet.css */
            .immersive-translate-sheet {
                position: fixed;
                transform: translateY(100%);
                /* Start off screen */
                left: 0;
                right: 0;
                background-color: white;
                transition: transform 0.3s ease-out;
                /* Smooth slide transition */
                box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
                /* Ensure it's above other content */
                bottom: 0;
                border-top-left-radius: 16px;
                border-top-right-radius: 16px;
                overflow: hidden;
            }

            .immersive-translate-sheet.visible {
                transform: translateY(0);
            }

            .immersive-translate-sheet-backdrop {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                opacity: 0;
                transition: opacity 0.3s ease-out;
            }

            .immersive-translate-sheet-backdrop.visible {
                opacity: 1;
            }

            .popup-container-sheet {
                max-width: 100vw;
                width: 100vw;
            }

            .imt-no-events svg * {
                pointer-events: none !important;
            }

            .imt-manga-button {
                width: 36px;
                display: flex;
                flex-direction: column;
                position: relative;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                pointer-events: all;
                margin: 0 0 10px 0;
                background-color: var(--float-ball-more-button-background-color);
                border-radius: 18px;
                filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.08));
                opacity: 0.5;
                right: 8px;
                padding: 10px 0 4px 0;
            }

            .imt-manga-feedback {
                cursor: pointer;
                margin-bottom: 10px;
            }

            .imt-fb-feedback {
                cursor: pointer;
                margin-top: 10px;
            }

            .imt-fb-upgrade-button {
                cursor: pointer;
                margin-top: 10px;
            }

            .imt-manga-button:hover {
                opacity: 1;
            }

            .imt-manga-translated {
                position: absolute;
                left: 24px;
                top: 20px;
            }

            .imt-float-ball-loading {
                animation: imt-loading-animation 0.6s infinite linear !important;
            }

            .imt-manga-guide-bg {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                z-index: -1;
                width: 372px;
                transform: translateY(-50%);
            }

            .imt-manga-guide-content {
                position: absolute;
                top: 15px;
                left: 0;
                right: 0;
                margin: 0 40px 0;
            }

            .img-manga-guide-button {
                width: fit-content;
                margin: 0 auto;
            }

            .img-manga-close {
                position: absolute;
                bottom: -200px;
                width: 32px;
                height: 32px;
                left: 0;
                right: 0;
                margin: auto;
                cursor: pointer;
            }

            .imt-fb-container.dragging .imt-fb-more-buttons,
            .imt-fb-container.dragging .imt-manga-button,
            .imt-fb-container.dragging .btn-animate:not(.imt-fb-btn) {
                display: none !important;
            }

            .imt-fb-container.dragging .imt-fb-btn {
                border-radius: 50% !important;
                width: 36px !important;
                height: 36px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                cursor: move !important;
            }

            .imt-fb-container.dragging .imt-fb-btn div {
                border-radius: 50% !important;
                width: 36px !important;
                height: 36px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                margin: 0 !important;
            }

            .imt-fb-container.dragging .imt-fb-btn.left,
            .imt-fb-container.dragging .imt-fb-btn.right {
                border-radius: 50% !important;
            }

            .imt-fb-container.dragging .imt-fb-btn.left div,
            .imt-fb-container.dragging .imt-fb-btn.right div {
                border-radius: 50% !important;
            }

            .imt-fb-container.dragging .imt-fb-logo-img {
                margin: 0 !important;
                padding: 4px !important;
            }

            .imt-fb-container.dragging .imt-float-ball-translated {
                right: 2px !important;
                bottom: 2px !important;
            }

            @-webkit-keyframes imt-loading-animation {
                from {
                    -webkit-transform: rotate(0deg);
                }

                to {
                    -webkit-transform: rotate(359deg);
                }
            }

            @keyframes imt-loading-animation {
                from {
                    transform: rotate(0deg);
                }

                to {
                    transform: rotate(359deg);
                }
            }

            .imt-fb-icon {
                color: #666666;
            }

            [data-theme="dark"] .imt-fb-icon {
                color: #B3B3B3;
            }

            [data-theme="light"] .imt-fb-icon {
                color: #666666;
            }
        </style>
        <div id="mount" style="display: block;">
            <div hidden="" id="immersive-translate-popup-overlay" class="immersive-translate-popup-overlay"
                style="z-index: 2147483647; background-color: rgba(0, 0, 0, 0.5);">
                <div class="immersive-translate-popup-wrapper"
                    style="position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">
                    <div data-theme="light" class="popup-container " dir="ltr">
                        <div class="popup-content text-sm">
                            <div class="flex items-center justify-between ml-1" style="height: 28px;">
                                <div class="flex items-center"><a
                                        class="flex items-center text-decoration-none cursor-pointer"
                                        target="_blank"><img
                                            src=""><span
                                            class="text-xs ml-1 text-label">未登录</span></a><a
                                        class="upgrade-pro ml-1 text-decoration-none cursor-pointer"
                                        title="升级为会员后可以畅享 DeepL, OpenAI, Claude, Gemini 翻译，点此升级" target="_blank"><svg
                                            xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                                            viewBox="0 0 12 12" fill="none">
                                            <g clip-path="url(#clip0_13006_12686)">
                                                <path
                                                    d="M11.8713 0.320171C11.8375 0.103619 11.8259 0.0943048 11.6035 0.0535558C11.3974 0.0151353 11.1913 0 10.9841 0C10.7815 0 10.5789 0.0139711 10.3775 0.0349277C9.56837 0.118754 8.77901 0.299214 8.01293 0.575143C6.65657 1.06413 5.45971 1.79412 4.49105 2.87572C4.44681 2.92461 4.4014 2.94091 4.34435 2.94091C4.33038 2.94091 4.31641 2.93975 4.30127 2.93859C3.89378 2.89434 3.48513 2.82332 3.07648 2.82332H3.04853C2.31971 2.82915 1.75155 3.16329 1.35687 3.78151C1.14148 4.11914 0.927257 4.45794 0.711869 4.79674C0.511617 5.11109 0.306708 5.42078 0.112277 5.73862C-0.163652 6.19036 0.0971414 6.7329 0.610579 6.77132C1.2288 6.81789 1.84702 6.85515 2.46524 6.88891C2.57701 6.89473 2.62474 6.925 2.63522 7.04376C2.67248 7.43728 2.77726 7.81217 2.98799 8.15097C3.39898 8.80994 3.9974 9.17202 4.76116 9.27331C5.04873 9.31173 5.04058 9.31406 5.06153 9.61094C5.10228 10.2047 5.14653 10.7997 5.20241 11.3923C5.23734 11.7625 5.52258 12 5.84042 12C5.96616 12 6.09772 11.9627 6.22113 11.8824C6.91154 11.4307 7.60893 10.9859 8.27838 10.5039C8.90242 10.0545 9.17369 9.42117 9.09336 8.64694C9.05959 8.31513 9.03165 7.98215 8.99789 7.65033C8.98741 7.54788 9.01186 7.46987 9.09219 7.39653C10.0713 6.49888 10.7699 5.41263 11.2472 4.17968C11.6466 3.14815 11.8852 2.08402 11.919 0.976812C11.9202 0.945377 11.9213 0.913942 11.9213 0.883671C11.9248 0.693897 11.9004 0.506452 11.8713 0.320171Z"
                                                    fill="url(#paint0_linear_13006_12686)"></path>
                                                <path
                                                    d="M8.60616 4.5H8.61431C9.23886 4.5 9.74176 4.00469 9.74992 3.37907C9.75734 2.77715 9.25814 2.25962 8.66475 2.25H8.64398C8.0365 2.25 7.51506 2.69497 7.50022 3.38574C7.48761 3.96841 8.01647 4.49556 8.60616 4.5Z"
                                                    fill="#424242"></path>
                                                <path
                                                    d="M4.09626 10.4539C3.77376 10.7799 3.44777 11.1012 3.12643 11.426C3.04959 11.504 2.96693 11.5518 2.87146 11.5518C2.8342 11.5518 2.79462 11.5448 2.75271 11.5285C2.60019 11.4726 2.52684 11.3597 2.51985 11.2013C2.5152 11.1012 2.51753 11.0011 2.5152 10.901C2.5117 10.7822 2.51054 10.7391 2.46397 10.7391C2.43836 10.7391 2.39994 10.7519 2.34056 10.7717C1.97847 10.8917 1.61755 11.0127 1.25547 11.1327C1.20075 11.1513 1.14487 11.1641 1.09131 11.1641C1.04008 11.1641 0.988855 11.1524 0.937628 11.1245C0.782782 11.0372 0.724569 10.8823 0.786275 10.6926C0.906193 10.3212 1.0331 9.95093 1.15534 9.57953C1.2089 9.41886 1.20541 9.41537 1.03193 9.41188C0.92715 9.41071 0.822367 9.41188 0.717583 9.40722C0.565066 9.40024 0.45679 9.32572 0.399741 9.18136C0.345021 9.04048 0.379949 8.91823 0.482403 8.81462C0.818874 8.47698 1.15651 8.13935 1.49414 7.80288C1.55468 7.74233 1.62687 7.70508 1.70487 7.70508C1.71302 7.70508 1.72117 7.70508 1.72816 7.70624C1.91095 7.70857 2.01224 7.79007 2.0786 7.97635C2.3359 8.70983 2.80393 9.26518 3.48269 9.6424C3.63288 9.72506 3.79006 9.79259 3.95305 9.84848C4.24761 9.9486 4.31397 10.2338 4.09626 10.4539Z"
                                                    fill="#F8C235"></path>
                                            </g>
                                            <defs>
                                                <linearGradient id="paint0_linear_13006_12686" x1="12.0001"
                                                    y1="0.857143" x2="3.42864" y2="8.57143"
                                                    gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#FFEAB5"></stop>
                                                    <stop offset="1" stop-color="#F9C235"></stop>
                                                </linearGradient>
                                                <clipPath id="clip0_13006_12686">
                                                    <rect width="12" height="12" fill="white"></rect>
                                                </clipPath>
                                            </defs>
                                        </svg><span>升级</span></a></div>
                                <div class=" " style="position: relative; display: inline-block; opacity: 1;">
                                    <div class="download-app"><svg xmlns="http://www.w3.org/2000/svg" width="18"
                                            height="18" viewBox="0 0 18 18" fill="none">
                                            <mask id="mask0_36366_4749" maskUnits="userSpaceOnUse" x="0" y="0"
                                                width="18" height="18" style="mask-type: alpha;">
                                                <rect width="18" height="18" fill="#D9D9D9"></rect>
                                            </mask>
                                            <g mask="url(#mask0_36366_4749)">
                                                <path
                                                    d="M8.99626 14.9004C9.15751 14.9004 9.29657 14.8433 9.41345 14.729C9.5302 14.6149 9.58857 14.4771 9.58857 14.3157C9.58857 14.1545 9.53151 14.0155 9.41738 13.8987C9.30313 13.7819 9.16538 13.7234 9.00413 13.7234C8.84288 13.7234 8.70382 13.7806 8.58695 13.8948C8.4702 14.0089 8.41182 14.1466 8.41182 14.3079C8.41182 14.4692 8.46888 14.6083 8.58301 14.7251C8.69726 14.8419 8.83501 14.9004 8.99626 14.9004ZM4.28101 16.7234C3.94826 16.7234 3.66407 16.6057 3.42845 16.3702C3.19295 16.1346 3.0752 15.8504 3.0752 15.5176V2.47925C3.0752 2.1465 3.19295 1.86231 3.42845 1.62669C3.66407 1.39119 3.94826 1.27344 4.28101 1.27344H13.7194C14.0521 1.27344 14.3363 1.39119 14.5719 1.62669C14.8074 1.86231 14.9252 2.1465 14.9252 2.47925V15.5176C14.9252 15.8504 14.8074 16.1346 14.5719 16.3702C14.3363 16.6057 14.0521 16.7234 13.7194 16.7234H4.28101ZM4.0502 12.8754V15.5176C4.0502 15.585 4.07182 15.6403 4.11507 15.6836C4.15832 15.7268 4.21363 15.7484 4.28101 15.7484H13.7194C13.7868 15.7484 13.8421 15.7268 13.8853 15.6836C13.9286 15.6403 13.9502 15.585 13.9502 15.5176V12.8754H4.0502ZM4.0502 11.9004H13.9502V4.31094H4.0502V11.9004ZM4.0502 3.33594H13.9502V2.47925C13.9502 2.41188 13.9286 2.35656 13.8853 2.31331C13.8421 2.27006 13.7868 2.24844 13.7194 2.24844H4.28101C4.21363 2.24844 4.15832 2.27006 4.11507 2.31331C4.07182 2.35656 4.0502 2.41188 4.0502 2.47925V3.33594Z"
                                                    fill="#666666"></path>
                                            </g>
                                        </svg><span>下载手机 APP</span><svg xmlns="http://www.w3.org/2000/svg" width="16"
                                            height="16" viewBox="0 0 16 16" fill="none">
                                            <rect width="16" height="16" rx="8" fill="#F9FBFC"></rect>
                                            <path
                                                d="M8 8.63878L5.76426 10.8745C5.68061 10.9582 5.57414 11 5.44487 11C5.31559 11 5.20913 10.9582 5.12548 10.8745C5.04182 10.7909 5 10.6844 5 10.5551C5 10.4259 5.04182 10.3194 5.12548 10.2357L7.36122 8L5.12548 5.76426C5.04182 5.68061 5 5.57414 5 5.44487C5 5.31559 5.04182 5.20913 5.12548 5.12548C5.20913 5.04182 5.31559 5 5.44487 5C5.57414 5 5.68061 5.04182 5.76426 5.12548L8 7.36122L10.2357 5.12548C10.3194 5.04182 10.4259 5 10.5551 5C10.6844 5 10.7909 5.04182 10.8745 5.12548C10.9582 5.20913 11 5.31559 11 5.44487C11 5.57414 10.9582 5.68061 10.8745 5.76426L8.63878 8L10.8745 10.2357C10.9582 10.3194 11 10.4259 11 10.5551C11 10.6844 10.9582 10.7909 10.8745 10.8745C10.7909 10.9582 10.6844 11 10.5551 11C10.4259 11 10.3194 10.9582 10.2357 10.8745L8 8.63878Z"
                                                fill="#666666"></path>
                                        </svg></div>
                                </div>
                            </div>
                            <div class="flex mt-4 items-center">
                                <div class="language-select-container"><label>原文语言</label><select autocomplete="off"
                                        id="source-language-select" class="language-select">
                                        <option value="auto">自动检测</option>
                                        <option value="zh-CN">简体中文</option>
                                        <option value="zh-TW">繁体中文-台湾 (繁體中文-台湾)</option>
                                        <option value="zh-HK">繁体中文-香港 (繁體中文-香港)</option>
                                        <option value="en">英语 (English)</option>
                                        <option value="ja">日语 (日本語)</option>
                                        <option value="ko">韩语 (한국어)</option>
                                        <option value="es">西班牙语 (Español)</option>
                                        <option value="de">德语 (Deutsch)</option>
                                        <option value="fr">法语 (Français)</option>
                                        <option value="pt">葡萄牙语 (Português)</option>
                                        <option value="pt-br">葡萄牙语（巴西） (Português (Brasil))</option>
                                        <option value="sq">阿尔巴尼亚语 (Shqip)</option>
                                        <option value="ar">阿拉伯语 (العربية)</option>
                                        <option value="am">阿姆哈拉语 (አማርኛ)</option>
                                        <option value="az">阿塞拜疆语 (Azərbaycanca)</option>
                                        <option value="ga">爱尔兰语 (Gaeilge)</option>
                                        <option value="et">爱沙尼亚语 (Eesti)</option>
                                        <option value="eu">巴斯克语 (Euskara)</option>
                                        <option value="be">白俄罗斯语 (Беларуская)</option>
                                        <option value="mww">白苗语 (Hmong Daw)</option>
                                        <option value="xh">班图语 (isiXhosa)</option>
                                        <option value="bg">保加利亚语 (Български)</option>
                                        <option value="is">冰岛语 (Íslenska)</option>
                                        <option value="pl">波兰语 (Polski)</option>
                                        <option value="bs">波斯尼亚语 (Bosanski)</option>
                                        <option value="fa">波斯语 (فارسی)</option>
                                        <option value="bo">藏语 (བོད་ཡིག)</option>
                                        <option value="da">丹麦语 (Dansk)</option>
                                        <option value="zh-CN-NE">东北话 (東北官話)</option>
                                        <option value="ru">俄语 (Русский)</option>
                                        <option value="sa">梵语 (संस्कृतम्)</option>
                                        <option value="fil">菲律宾语 (Filipino)</option>
                                        <option value="fj">斐济语 (Na Vosa Vakaviti)</option>
                                        <option value="fi">芬兰语 (Suomi)</option>
                                        <option value="fy">弗里斯兰语 (Frysk)</option>
                                        <option value="km">高棉语 (ភាសាខ្មែរ)</option>
                                        <option value="ka">格鲁吉亚语 (ქართული)</option>
                                        <option value="gu">古吉拉特语 (ગુજરાતી)</option>
                                        <option value="kk">哈萨克语 (Қазақ Тілі)</option>
                                        <option value="ht">海地克里奥尔语 (Kreyòl Ayisyen)</option>
                                        <option value="ha">豪萨语 (Hausa)</option>
                                        <option value="nl">荷兰语 (Nederlands)</option>
                                        <option value="ky">吉尔吉斯语 (Кыргызча)</option>
                                        <option value="gl">加利西亚语 (Galego)</option>
                                        <option value="ca">加泰罗尼亚语 (Català)</option>
                                        <option value="cs">捷克语 (Čeština)</option>
                                        <option value="kn">卡纳达语 (ಕನ್ನಡ)</option>
                                        <option value="co">科西嘉语 (Corsu)</option>
                                        <option value="otq">克雷塔罗奥托米语 (Hñähñu)</option>
                                        <option value="tlh">克林贡语 (tlhIngan Hol)</option>
                                        <option value="tlh-Qaak">克林贡语（piqaD） (tlhIngan Hol (pIqaD))</option>
                                        <option value="hr">克罗地亚语 (Hrvatski)</option>
                                        <option value="ku">库尔德语 (Kurdî)</option>
                                        <option value="la">拉丁语 (Latina)</option>
                                        <option value="lv">拉脱维亚语 (Latviešu)</option>
                                        <option value="lo">老挝语 (ລາວ)</option>
                                        <option value="lt">立陶宛语 (Lietuvių)</option>
                                        <option value="lb">卢森堡语 (Lëtzebuergesch)</option>
                                        <option value="ro">罗马尼亚语 (Română)</option>
                                        <option value="ur-roman">罗马乌尔都语 (Roman Urdu)</option>
                                        <option value="mt">马耳他语 (Malti)</option>
                                        <option value="mr">马拉地语 (मराठी)</option>
                                        <option value="mg">马拉加斯语 (Malagasy)</option>
                                        <option value="ml">马拉雅拉姆语 (മലയാളം)</option>
                                        <option value="ms">马来语 (Bahasa Melayu)</option>
                                        <option value="mk">马其顿语 (Македонски)</option>
                                        <option value="mi">毛利语 (Māori)</option>
                                        <option value="mn">蒙古语 (Монгол)</option>
                                        <option value="bn">孟加拉语 (বাংলা)</option>
                                        <option value="my">缅甸语 (မြန်မာစာ)</option>
                                        <option value="hmn">苗语 (Hmoob)</option>
                                        <option value="af">南非荷兰语 (Afrikaans)</option>
                                        <option value="ne">尼泊尔语 (नेपाली)</option>
                                        <option value="no">挪威语 (Norsk)</option>
                                        <option value="pa">旁遮普语 (ਪੰਜਾਬੀ)</option>
                                        <option value="ps">普什图语 (پښتو)</option>
                                        <option value="ny">齐切瓦语（尼扬贾语） (Chichewa)</option>
                                        <option value="sv">瑞典语 (Svenska)</option>
                                        <option value="sm">萨摩亚语 (Gagana Samoa)</option>
                                        <option value="sr">塞尔维亚语 (Српски)</option>
                                        <option value="sr-Latn">塞尔维亚语（拉丁文） (Srpski (Latinica))</option>
                                        <option value="sr-Cyrl">塞尔维亚语（西里尔文） (Српски (Ћирилица))</option>
                                        <option value="st">塞索托语 (Sesotho)</option>
                                        <option value="si">僧伽罗语 (සිංහල)</option>
                                        <option value="eo">世界语 (Esperanto)</option>
                                        <option value="sk">斯洛伐克语 (Slovenčina)</option>
                                        <option value="sl">斯洛文尼亚语 (Slovenščina)</option>
                                        <option value="sw">斯瓦希里语 (Kiswahili)</option>
                                        <option value="gd">苏格兰盖尔语 (Gàidhlig)</option>
                                        <option value="ceb">宿务语 (Binisaya)</option>
                                        <option value="so">索马里语 (Soomaali)</option>
                                        <option value="tg">塔吉克语 (Тоҷикӣ)</option>
                                        <option value="ty">塔希提语 (Reo Tahiti)</option>
                                        <option value="te">泰卢固语 (తెలుగు)</option>
                                        <option value="ta">泰米尔语 (தமிழ்)</option>
                                        <option value="th">泰语 (ไทย)</option>
                                        <option value="to">汤加语 (lea fakatonga)</option>
                                        <option value="tr">土耳其语 (Türkçe)</option>
                                        <option value="cy">威尔士语 (Cymraeg)</option>
                                        <option value="ug">维吾尔语 (ئۇيغۇرچە)</option>
                                        <option value="wyw">文言文 (文言文)</option>
                                        <option value="ur">乌尔都语 (اردو)</option>
                                        <option value="uk">乌克兰语 (Українська)</option>
                                        <option value="uz">乌兹别克语 (Oʻzbek)</option>
                                        <option value="he">希伯来语 (עברית)</option>
                                        <option value="el">希腊语 (Ελληνικά)</option>
                                        <option value="haw">夏威夷语 (ʻŌlelo Hawaiʻi)</option>
                                        <option value="sd">信德语 (سنڌي)</option>
                                        <option value="hu">匈牙利语 (Magyar)</option>
                                        <option value="sn">修纳语 (ChiShona)</option>
                                        <option value="su">巽他语 (Basa Sunda)</option>
                                        <option value="hy">亚美尼亚语 (Հայերեն)</option>
                                        <option value="ig">伊博语 (Asụsụ Igbo)</option>
                                        <option value="it">意大利语 (Italiano)</option>
                                        <option value="yi">意第绪语 (ייִדיש)</option>
                                        <option value="hi">印地语 (हिन्दी)</option>
                                        <option value="id">印度尼西亚语 (Bahasa Indonesia)</option>
                                        <option value="yua">尤卡坦玛雅语 (Màaya T'àan)</option>
                                        <option value="yo">约鲁巴语 (Èdè Yorùbá)</option>
                                        <option value="yue">粤语 (粵語)</option>
                                        <option value="vi">越南语 (Tiếng Việt)</option>
                                        <option value="jw">爪哇语 (Basa Jawa)</option>
                                        <option value="zu">祖鲁语 (isiZulu)</option>
                                    </select></div><img
                                    src=""
                                    class="mx-2" style="max-width: unset;">
                                <div class="language-select-container"><label>目标语言</label><select autocomplete="off"
                                        id="target-language-select" class="language-select">
                                        <option value="zh-CN">简体中文</option>
                                        <option value="zh-TW">繁体中文-台湾 (繁體中文-台湾)</option>
                                        <option value="en">英语 (English)</option>
                                        <option value="ja">日语 (日本語)</option>
                                        <option value="ko">韩语 (한국어)</option>
                                        <option value="es">西班牙语 (Español)</option>
                                        <option value="de">德语 (Deutsch)</option>
                                        <option value="fr">法语 (Français)</option>
                                        <option value="pt">葡萄牙语 (Português)</option>
                                        <option value="pt-br">葡萄牙语（巴西） (Português (Brasil))</option>
                                        <option value="ru">俄语 (Русский)</option>
                                        <option value="yue">粤语 (粵語)</option>
                                        <option value="ar">阿拉伯语 (العربية)</option>
                                        <option value="ga">爱尔兰语 (Gaeilge)</option>
                                        <option value="et">爱沙尼亚语 (Eesti)</option>
                                        <option value="bg">保加利亚语 (Български)</option>
                                        <option value="is">冰岛语 (Íslenska)</option>
                                        <option value="pl">波兰语 (Polski)</option>
                                        <option value="bs">波斯尼亚语 (Bosanski)</option>
                                        <option value="fa">波斯语 (فارسی)</option>
                                        <option value="bo">藏语 (བོད་ཡིག)</option>
                                        <option value="da">丹麦语 (Dansk)</option>
                                        <option value="fil">菲律宾语 (Filipino)</option>
                                        <option value="fj">斐济语 (Na Vosa Vakaviti)</option>
                                        <option value="fi">芬兰语 (Suomi)</option>
                                        <option value="km">高棉语 (ភាសាខ្មែរ)</option>
                                        <option value="gu">古吉拉特语 (ગુજરાતી)</option>
                                        <option value="kk">哈萨克语 (Қазақ Тілі)</option>
                                        <option value="ht">海地克里奥尔语 (Kreyòl Ayisyen)</option>
                                        <option value="nl">荷兰语 (Nederlands)</option>
                                        <option value="ca">加泰罗尼亚语 (Català)</option>
                                        <option value="cs">捷克语 (Čeština)</option>
                                        <option value="kn">卡纳达语 (ಕನ್ನಡ)</option>
                                        <option value="otq">克雷塔罗奥托米语 (Hñähñu)</option>
                                        <option value="tlh">克林贡语 (tlhIngan Hol)</option>
                                        <option value="hr">克罗地亚语 (Hrvatski)</option>
                                        <option value="lv">拉脱维亚语 (Latviešu)</option>
                                        <option value="lt">立陶宛语 (Lietuvių)</option>
                                        <option value="ro">罗马尼亚语 (Română)</option>
                                        <option value="mt">马耳他语 (Malti)</option>
                                        <option value="mr">马拉地语 (मराठी)</option>
                                        <option value="mg">马拉加斯语 (Malagasy)</option>
                                        <option value="ml">马拉雅拉姆语 (മലയാളം)</option>
                                        <option value="ms">马来语 (Bahasa Melayu)</option>
                                        <option value="mi">毛利语 (Māori)</option>
                                        <option value="bn">孟加拉语 (বাংলা)</option>
                                        <option value="hmn">苗语 (Hmoob)</option>
                                        <option value="af">南非荷兰语 (Afrikaans)</option>
                                        <option value="no">挪威语 (Norsk)</option>
                                        <option value="pa">旁遮普语 (ਪੰਜਾਬੀ)</option>
                                        <option value="ps">普什图语 (پښتو)</option>
                                        <option value="sv">瑞典语 (Svenska)</option>
                                        <option value="sm">萨摩亚语 (Gagana Samoa)</option>
                                        <option value="sr-Latn">塞尔维亚语（拉丁文） (Srpski (Latinica))</option>
                                        <option value="sr-Cyrl">塞尔维亚语（西里尔文） (Српски (Ћирилица))</option>
                                        <option value="sk">斯洛伐克语 (Slovenčina)</option>
                                        <option value="sl">斯洛文尼亚语 (Slovenščina)</option>
                                        <option value="sw">斯瓦希里语 (Kiswahili)</option>
                                        <option value="ty">塔希提语 (Reo Tahiti)</option>
                                        <option value="te">泰卢固语 (తెలుగు)</option>
                                        <option value="ta">泰米尔语 (தமிழ்)</option>
                                        <option value="th">泰语 (ไทย)</option>
                                        <option value="to">汤加语 (lea fakatonga)</option>
                                        <option value="tr">土耳其语 (Türkçe)</option>
                                        <option value="cy">威尔士语 (Cymraeg)</option>
                                        <option value="ug">维吾尔语 (ئۇيغۇرچە)</option>
                                        <option value="wyw">文言文 (文言文)</option>
                                        <option value="ur">乌尔都语 (اردو)</option>
                                        <option value="uk">乌克兰语 (Українська)</option>
                                        <option value="he">希伯来语 (עברית)</option>
                                        <option value="el">希腊语 (Ελληνικά)</option>
                                        <option value="hu">匈牙利语 (Magyar)</option>
                                        <option value="it">意大利语 (Italiano)</option>
                                        <option value="hi">印地语 (हिन्दी)</option>
                                        <option value="id">印度尼西亚语 (Bahasa Indonesia)</option>
                                        <option value="yua">尤卡坦玛雅语 (Màaya T'àan)</option>
                                        <option value="vi">越南语 (Tiếng Việt)</option>
                                    </select></div>
                            </div>
                            <div class="translation-service-container mt-3">
                                <div class="min-select-container  "><label
                                        class="inline-block text-label mb-0 text-gray-6"
                                        style="min-width: 60px; flex-shrink: 0;">翻译服务：</label>
                                    <div class="custom-select-container translate-service">
                                        <div id="translation-service-select" class="flex items-center">
                                            <div class="custom-select-item selected default" value="bing-free"><img
                                                    class="custom-select-item-img"
                                                    src=""><span
                                                    class="flex items-center overflow-hidden"><span
                                                        class="text-ellipsis overflow-hidden">微软翻译</span></span></div>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"
                                                viewBox="0 0 16 16">
                                                <path
                                                    d="M8.0023 9.68007L3.83278 5.51245L3.02478 6.32007L8.00268 11.2953L12.9756 6.32007L12.1673 5.51245L8.0023 9.68007Z"
                                                    fill="currentColor"></path>
                                            </svg>
                                        </div>
                                        <div class="custom-select-popup" style="display: none;">
                                            <div class="custom-select-content" style="max-height: 220px; top: 20px;">
                                                <div>
                                                    <div class="custom-select-group-header">免费模型</div>
                                                    <div class="custom-select-item  " value="google-free"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">谷歌翻译</span></span>
                                                    </div>
                                                    <div class="custom-select-item selected " value="bing-free"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">微软翻译</span></span>
                                                    </div>
                                                    <div class="custom-select-item  " value="zhipu-free"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">GLM-4
                                                                Flash</span></span></div>
                                                    <div class="custom-select-item  " value="siliconcloud-free"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">硅基流动翻译</span></span>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="custom-select-group-header">高级模型</div>
                                                    <div class="custom-select-item  " value="zhipu-air-pro"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">GLM-4.5
                                                                Air</span><span class="custom-select-item-pro"><img
                                                                    src=""></span></span>
                                                    </div>
                                                    <div class="custom-select-item  " value="deepseek-pro"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">DeepSeek
                                                                V3</span><span class="custom-select-item-pro"><img
                                                                    src=""></span></span>
                                                    </div>
                                                    <div class="custom-select-item  " value="openai-pro"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">GPT-5
                                                                mini</span><span class="custom-select-item-pro"><img
                                                                    src=""></span></span>
                                                    </div>
                                                    <div class="custom-select-item  " value="claude-pro"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">Claude 4.5
                                                                Haiku</span><span class="custom-select-item-pro"><img
                                                                    src=""></span></span>
                                                    </div>
                                                    <div class="custom-select-item  " value="gemini-pro"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">Gemini 2.5
                                                                Flash</span><span class="custom-select-item-pro"><img
                                                                    src=""></span></span>
                                                    </div>
                                                    <div class="custom-select-item  " value="zhipu-pro"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">GLM-4.5</span><span
                                                                class="custom-select-item-pro"><img
                                                                    src=""></span></span>
                                                    </div>
                                                    <div class="custom-select-item  " value="deepl-pro"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">DeepL
                                                                Pro</span><span class="custom-select-item-pro"><img
                                                                    src=""></span></span>
                                                    </div>
                                                    <div class="custom-select-item  " value="qwen-pro"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">Qwen
                                                                Plus</span><span class="custom-select-item-pro"><img
                                                                    src=""></span></span>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="custom-select-group-header">顶级模型</div>
                                                    <div class="custom-select-item  " value="openai-max"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">GPT-5</span><span
                                                                class="custom-select-item-pro"><img
                                                                    src=""></span></span>
                                                    </div>
                                                    <div class="custom-select-item  " value="claude-max"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">Claude 4.5
                                                                Sonnet</span><span class="custom-select-item-pro"><img
                                                                    src=""></span></span>
                                                    </div>
                                                    <div class="custom-select-item  " value="gemini-max"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">Gemini 2.5
                                                                Pro</span><span class="custom-select-item-pro"><img
                                                                    src=""></span></span>
                                                    </div>
                                                    <div class="custom-select-item  " value="kimi-max"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">Kimi
                                                                K2</span><span class="custom-select-item-pro"><img
                                                                    src=""></span></span>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="custom-select-group-header">其他/自定义</div>
                                                    <div class="custom-select-item  " value="more"><img
                                                            class="custom-select-item-img"
                                                            src=""><span
                                                            class="flex items-center overflow-hidden"><span
                                                                class="text-ellipsis overflow-hidden">更多翻译服务</span></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="min-select-container"><label
                                        class="inline-block text-label mb-0 text-gray-6 flex flex-row items-center"
                                        style="min-width: 60px; flex-shrink: 0;">启用 AI 精翻<img
                                            src=""
                                            class="ml-2">
                                        <div class=" "
                                            style="position: relative; pointer-events: all; display: inline-block; opacity: 1;">
                                            <div><svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    style="margin-left: 4px; cursor: pointer;">
                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                        d="M14.4763 8C14.4763 4.42323 11.5769 1.5238 8.00012 1.5238C4.42335 1.5238 1.52393 4.42323 1.52393 8C1.52393 11.5768 4.42335 14.4762 8.00012 14.4762C11.5769 14.4762 14.4763 11.5768 14.4763 8ZM2.66678 8C2.66678 5.05447 5.05459 2.66666 8.00012 2.66666C10.9456 2.66666 13.3335 5.05447 13.3335 8C13.3335 10.9455 10.9456 13.3333 8.00012 13.3333C5.05459 13.3333 2.66678 10.9455 2.66678 8ZM8.64493 4.62911C9.33636 4.76854 10.1588 5.42797 10.1588 6.38721C10.1588 7.25184 9.52267 7.63216 9.19136 7.83023L9.19135 7.83023L9.1913 7.83026C9.15492 7.85201 9.12223 7.87155 9.09445 7.8893C8.81331 8.06911 8.70817 8.27635 8.70817 8.49654V9.52359H7.63731V8.10683C7.63731 7.77083 7.74512 7.5354 8.04493 7.3274L8.11236 7.28283L8.71388 6.88283C9.0975 6.62454 9.09217 6.10607 8.85483 5.87711C8.72757 5.76556 8.57584 5.68553 8.4119 5.64351C8.24797 5.60148 8.07645 5.59864 7.91121 5.63521C7.24379 5.76626 7.16683 6.23711 7.16226 6.69426V6.95292H6.09521C6.09521 6.06302 6.19731 5.65959 6.67198 5.14988C7.20379 4.58035 7.95312 4.48892 8.64493 4.62911ZM8.70817 10.2855V11.4284H7.63769L7.63731 10.2855H8.70817Z"
                                                        fill="#CCCCCC"></path>
                                                </svg></div>
                                        </div>
                                    </label><input id="toggle-ai-context" class="shrink-0" role="switch"
                                        type="checkbox"></div>
                            </div>
                            <div class="flex flex-row mt-3 items-center">
                                <div class=" "
                                    style="position: relative; pointer-events: all; display: inline-block; opacity: 1;">
                                    <div>
                                        <div class="translate-mode mr-2 "><svg xmlns="http://www.w3.org/2000/svg"
                                                width="22" height="22" viewBox="0 0 24 24" fill="#222222">
                                                <path
                                                    d="M22.9331 7.46673V21.3334C22.9331 22.2667 22.1331 23.0667 21.1997 23.0667H10.1331V22.0001V20.9334H20.9331V7.60006H15.3331L11.0664 18.0001C10.7997 18.6667 10.1331 19.0667 9.46641 19.0667H2.79974C1.86641 19.0667 1.06641 18.2667 1.06641 17.3334V3.46673C1.06641 2.5334 1.86641 1.7334 2.79974 1.7334L12.9331 1.7334V2.80007V3.86673H2.93307V17.3334H9.33307L13.5997 6.9334C13.8664 6.26673 14.5331 5.86673 15.1997 5.86673H21.3331C22.2664 5.60006 22.9331 6.40007 22.9331 7.46673Z">
                                                </path>
                                                <path
                                                    d="M5.904 11.4063L5.472 13H4L6.056 6H7.96L10 13H8.496L8.072 11.4063H5.904ZM7.688 9.95389L7.048 7.54323H6.952L6.296 9.95389H7.688Z"
                                                    fill="#EA4C89"></path>
                                                <path
                                                    d="M19.4337 18.9805C18.403 18.6732 17.5907 18.3117 16.9968 17.8961C16.6999 18.1039 16.3542 18.2965 15.9597 18.474C15.5652 18.6558 15.1071 18.8312 14.5854 19L14 17.8831C14.9035 17.6494 15.6076 17.3918 16.1124 17.1104C15.8579 16.816 15.6394 16.4848 15.4571 16.1169C15.2789 15.7489 15.1262 15.3312 14.9989 14.8636H14.1718V13.8182H16.456C16.4178 13.5844 16.3669 13.3312 16.3033 13.0584L17.5504 13L17.6522 13.8182H19.8091V14.8636H18.9374C18.8059 15.3485 18.6532 15.7749 18.4793 16.1429C18.3054 16.5108 18.0976 16.8377 17.8558 17.1234C18.4327 17.4524 19.1474 17.6926 20 17.8442L19.4337 18.9805ZM16.1633 14.8636C16.3118 15.487 16.5854 16.013 16.9841 16.4416C17.1707 16.2424 17.3256 16.0152 17.4486 15.7597C17.5758 15.5 17.684 15.2013 17.7731 14.8636H16.1633Z"
                                                    fill="#EA4C89"></path>
                                            </svg></div>
                                    </div>
                                </div><button type="button" id="translate-button" class="mb-0 main-button"
                                    aria-busy="false">翻译 (Alt+Q)</button>
                            </div>
                            <div class="text-sm text-gray-9 mt-4 ml-1 display-none"></div>
                            <div class="text-sm text-gray-9 mt-4 ml-1 display-none" style="color: rgb(208, 147, 29);">
                            </div>
                            <div class="text-sm mt-2" style="max-width: 218px;"></div>
                            <div class="text-sm px-1 text-gray-2">
                                <div class="flex justify-between mt-5"><select autocomplete="off"
                                        class="transform-padding-left min-select always-translate-this-site-select"
                                        style="max-width: 230px; width: unset; flex: unset;">
                                        <option value="matches">总是翻译该网站</option>
                                        <option value="excludeMatches">不自动翻译该网站</option>
                                    </select><input id="always-translate-this-site-input" type="checkbox" role="switch"
                                        class="shrink-0"></div>
                                <div class="flex mt-3 items-center justify-between">
                                    <div class="flex items-center"><label
                                            class="mb-0 mr-2 shrink-0">鼠标悬停:</label><select autocomplete="off"
                                            class="transform-padding-left min-select mouse-hover-translate-select"
                                            style="max-width: 100%; width: 100%;">
                                            <option value="Ctrl">+ Ctrl 翻译/还原该段</option>
                                            <option value="Shift">+ Shift 翻译/还原该段</option>
                                            <option value="Alt">+ Alt 翻译/还原该段</option>
                                            <option value="MouseHoldKeyPressHold">+ 长按鼠标左键</option>
                                            <option value="Auto">直接翻译该段</option>
                                            <option value="Other">自定义快捷键(打开设置)</option>
                                        </select></div><input id="mouse-hover-translate-input" type="checkbox"
                                        role="switch" class="shrink-0">
                                </div>
                                <div class="flex mt-3 items-center justify-between">
                                    <div class="flex items-center"><label
                                            class="mb-0 mr-2 shrink-0">划词翻译:</label><select autocomplete="off"
                                            class="transform-padding-left min-select mouse-hover-translate-select"
                                            style="max-width: 100%; width: 100%;">
                                            <option value="direct">直接触发</option>
                                            <option value="icon">显示图标</option>
                                            <option value="mini">显示小圆点</option>
                                            <option value="Ctrl">按 Ctrl 触发</option>
                                            <option value="Alt">按 Alt 触发</option>
                                            <option value="Shift">按 Shift 触发</option>
                                        </select></div><input id="mouse-hover-translate-input" type="checkbox"
                                        role="switch" class="shrink-0">
                                </div><span></span>
                            </div>
                            <div class="widgets-container mt-5 ">
                                <div class=" "
                                    style="position: relative; pointer-events: all; display: inline-block; flex: 1 1 0%; opacity: 1;">
                                    <div>
                                        <div class="widget-item" title="文档翻译"><svg width="24" height="24"
                                                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
                                                fill="currentColor" style="margin-right: 0px;">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M19.4284 6.59193L15.1187 2.28564H6.28557C5.83092 2.28564 5.39488 2.46626 5.07339 2.78775C4.7519 3.10924 4.57129 3.54527 4.57129 3.99993V9.71422V18.8571V19.9999C4.57129 20.4546 4.7519 20.8906 5.07339 21.2121C5.39488 21.5336 5.83092 21.7142 6.28557 21.7142H17.7141C18.1688 21.7142 18.6048 21.5336 18.9263 21.2121C19.2478 20.8906 19.4284 20.4546 19.4284 19.9999V18.8571V9.71422V6.59193ZM15.341 6.82964V4.93136L17.2404 6.82964H15.341ZM6.28551 18.8571V19.9999H17.7141V18.8571V8.54335H13.6272L13.6267 3.99992H6.28551V18.8571Z">
                                                </path>
                                                <rect x="7.55957" y="10.2002" width="8.88" height="1.8" fill="#EA4C89">
                                                </rect>
                                                <rect x="7.55957" y="13.2002" width="8.88" height="1.68" fill="#EA4C89">
                                                </rect>
                                                <rect x="7.55957" y="16.0801" width="4.92" height="1.8" fill="#EA4C89">
                                                </rect>
                                            </svg><span class="widget-icon-text">文档翻译</span></div>
                                    </div>
                                </div>
                                <div class="widget-item" title="文本翻译"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                                        height="20" viewBox="0 0 16 20" fill="currentColor" style="margin-right: 4px;">
                                        <path
                                            d="M14.2857 0.286133C14.7404 0.286133 15.1764 0.466744 15.4979 0.788235C15.8194 1.10973 16 1.54576 16 2.00042V18.0004C16 18.2255 15.9557 18.4485 15.8695 18.6564C15.7834 18.8644 15.6571 19.0534 15.4979 19.2126C15.3387 19.3718 15.1497 19.4981 14.9417 19.5842C14.7338 19.6704 14.5108 19.7147 14.2857 19.7147H1.71429C1.48916 19.7147 1.26624 19.6704 1.05826 19.5842C0.85027 19.4981 0.661288 19.3718 0.502102 19.2126C0.342916 19.0534 0.216643 18.8644 0.130492 18.6564C0.0443411 18.4485 0 18.2255 0 18.0004V2.00042C0 1.54576 0.180611 1.10973 0.502102 0.788235C0.823593 0.466744 1.25963 0.286133 1.71429 0.286133H14.2857ZM14.2857 2.00042H1.71429V18.0004H14.2857V2.00042Z"
                                            fill="currentColor"></path><text x="4.5" y="14.5" textAnchor="middle"
                                            dominantBaseline="middle" fill="#EA4C89" fontFamily="Alibaba PuHuiTi 3.0"
                                            fontSize="11" fontWeight="700" fontStyle="normal">T</text>
                                    </svg><span class="widget-icon-text">文本翻译</span></div>
                                <div class="widget-item" title="奖励中心"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" style="margin-right: 0px;">
                                        <path
                                            d="M4.73641 19.9325C4.73641 20.3776 4.85796 20.4998 5.23835 20.4998H11.2616V11.995H4.73641V19.9325ZM12.7364 20.4998H18.7597C19.1408 20.4998 19.2616 20.3784 19.2616 19.9325V11.995H12.7357V20.4998H12.7364ZM19.2718 7.36327H15.6354C16.5133 7.15085 17.4404 6.46316 17.5546 5.65636C17.6885 4.7352 16.6588 3.33896 15.4127 3.5159C13.9227 3.73458 12.8303 5.13177 12.0594 6.21528C11.2943 5.1532 10.2972 3.91153 8.86885 3.55061C7.48548 3.20297 6.538 4.72648 6.56335 5.66945C6.58816 6.47074 7.46013 7.15161 8.36263 7.36327H4.72623C4.27677 7.36327 3.99902 7.6322 3.99902 8.13611V11.2254L11.2718 11.2269V7.36327H12.7262V11.2269L19.999 11.2254V8.13611C19.999 7.6322 19.7206 7.36327 19.2718 7.36327ZM7.56116 5.95393C7.30948 5.65636 7.47977 5.2522 7.63756 4.94705C7.9278 4.40918 8.3321 4.08241 9.02076 4.3868C9.98091 4.81258 10.6878 5.71288 11.2638 6.52024C10.0441 6.66324 8.22447 6.71881 7.56116 5.95393ZM12.8674 6.5064C13.4608 5.69809 14.1496 4.87744 15.103 4.37296C16.1026 3.84818 17.0295 5.26624 16.5554 5.9471C16.1904 6.46392 15.0335 6.51266 14.4088 6.54187C13.8948 6.56912 13.3798 6.55726 12.8674 6.5064Z"
                                            fill="#ED6D8F"></path>
                                        <path
                                            d="M11.2614 11.9952H7.21768C6.52575 13.2879 6.15297 14.7457 6.13406 16.2328C6.11514 17.7198 6.45071 19.1878 7.10951 20.4999H11.2614V11.9952ZM12.726 7.73418V11.2271L19.9988 11.2256V9.8496C19.0298 8.91196 17.8656 8.23144 16.6015 7.86376C15.3374 7.49607 14.0094 7.45167 12.726 7.73418ZM19.2614 19.9327V11.9952H12.7355V20.4999H18.7595C19.1406 20.4999 19.2614 20.3785 19.2614 19.9327ZM11.2716 11.2271V8.2068C9.83264 8.83641 8.58896 9.88261 7.68213 11.2263L11.2716 11.2271Z"
                                            fill="#E55884"></path>
                                        <path
                                            d="M12.7372 20.4998H18.7612C19.1423 20.4998 19.2632 20.3784 19.2632 19.9325V11.995H12.7372V20.4998ZM9.37501 18.3432C9.37449 19.073 9.47179 19.7991 9.664 20.4998H11.2632V13.1671C10.0463 14.5806 9.3725 16.4275 9.37501 18.3432ZM16.6044 10.6621C15.67 10.6608 14.7443 10.8526 13.8787 11.2267L19.3273 11.2256C18.4625 10.8522 17.5378 10.6608 16.6044 10.6621Z"
                                            fill="#DB3E77"></path>
                                        <path
                                            d="M18.9676 14.0576C16.3136 14.0576 13.9937 15.5771 12.7363 17.842V20.5H18.7603C19.1414 20.5 19.2623 20.3787 19.2623 19.9328V14.0639C19.1645 14.0597 19.0662 14.0576 18.9676 14.0576Z"
                                            fill="#D63070"></path>
                                        <path
                                            d="M8.20238 8.06029C8.33786 8.2763 7.62511 8.54334 6.87327 9.07551C6.12143 9.60769 5.6152 10.204 5.47954 9.98795C5.34388 9.77193 5.75979 9.03132 6.51163 8.49896C7.26347 7.9666 8.0669 7.84408 8.20238 8.06029Z"
                                            fill="white"></path>
                                    </svg><span class="widget-icon-text">奖励中心</span></div>
                            </div>
                        </div>
                        <footer>
                            <div class="px-3 py-2-5 text-sm flex  items-center justify-between popup-footer">
                                <div class="setting flex flex-row items-center justify-center secondary clickable"><svg
                                        width="20" height="20" viewBox="0 0 20 20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg" style="width: 16px; height: 16px;">
                                        <path
                                            d="M10.3873 2.29199C10.6319 2.29227 10.8664 2.38963 11.0392 2.56268C11.2121 2.73573 11.3092 2.97032 11.3092 3.21491V4.07845L12.1175 4.38366C12.7273 4.61311 13.2952 4.94108 13.7988 5.35449L14.4675 5.90241L15.2165 5.47012L15.2394 5.45658C15.3787 5.37513 15.5373 5.33233 15.6988 5.33262C15.861 5.33283 16.0203 5.37555 16.1608 5.45652C16.3014 5.53748 16.4182 5.65387 16.4998 5.79408L16.8925 6.47428C17.0145 6.68626 17.0475 6.93798 16.9843 7.17425C16.921 7.41052 16.7666 7.61207 16.555 7.7347L16.5321 7.74824L15.7842 8.17949L15.9227 9.03053C16.031 9.67987 16.031 10.3427 15.9227 10.992L15.781 11.8462L16.531 12.2785L16.5467 12.2878C16.758 12.4105 16.9122 12.6118 16.9754 12.8478C17.0387 13.0839 17.0059 13.3353 16.8842 13.5472L16.5154 14.1847C16.3932 14.3964 16.1919 14.551 15.9558 14.6145C15.7196 14.678 15.468 14.6451 15.256 14.5232L15.2415 14.5139L14.4904 14.0805L13.8206 14.6326C13.3125 15.0522 12.7384 15.3849 12.1217 15.617L11.3133 15.9222V16.7868C11.3132 16.9082 11.2891 17.0283 11.2425 17.1404C11.1958 17.2524 11.1276 17.3542 11.0415 17.4398C10.9555 17.5254 10.8535 17.5933 10.7412 17.6394C10.6289 17.6855 10.5087 17.7091 10.3873 17.7087H9.61229C9.3677 17.7084 9.13322 17.611 8.96037 17.438C8.78751 17.2649 8.69042 17.0303 8.69042 16.7857V15.9222L7.88209 15.617C7.27233 15.3875 6.70437 15.0596 6.20084 14.6462L5.53209 14.0982L4.78313 14.5305L4.76021 14.5441C4.62084 14.6255 4.46226 14.6683 4.30084 14.668C4.13864 14.6678 3.97932 14.6251 3.83877 14.5441C3.69823 14.4632 3.58135 14.3468 3.49979 14.2066L3.10709 13.5264C2.98505 13.3144 2.95205 13.0627 3.01532 12.8264C3.07858 12.5901 3.23296 12.3886 3.44459 12.266L3.4675 12.2524L4.21542 11.8212L4.07688 10.9701C3.96856 10.3208 3.96856 9.65799 4.07688 9.00866L4.21854 8.15553L3.46959 7.7222L3.45709 7.70866C3.24914 7.58523 3.09787 7.3852 3.03575 7.1515C2.97362 6.9178 3.00559 6.66905 3.12479 6.45866L3.49354 5.82116C3.57469 5.68082 3.69133 5.5643 3.83175 5.4833C3.97217 5.40231 4.13144 5.35968 4.29354 5.3597C4.45497 5.35942 4.61355 5.40221 4.75292 5.48366L4.7675 5.49199L5.51854 5.92533L6.18834 5.37324C6.69646 4.95362 7.27054 4.62101 7.88729 4.38887L8.69563 4.08366V3.21908C8.69452 2.97466 8.79041 2.73979 8.96226 2.56598C9.13411 2.39218 9.36788 2.29364 9.61229 2.29199H10.3873ZM10.3873 1.04199H9.61229C9.03636 1.04227 8.4841 1.27118 8.07685 1.67842C7.66961 2.08567 7.4407 2.63794 7.44042 3.21387C6.69518 3.49457 6.00146 3.89651 5.38729 4.40345L5.37271 4.39512C4.87362 4.10719 4.2806 4.02927 3.72407 4.17852C3.16753 4.32776 2.69307 4.69193 2.405 5.19095L2.03729 5.83366C1.74928 6.33263 1.67121 6.92555 1.82025 7.48207C1.96929 8.03858 2.33324 8.51313 2.83209 8.80137L2.84771 8.8097C2.78023 9.20478 2.74539 9.60474 2.74354 10.0055C2.74367 10.3974 2.77572 10.7886 2.83938 11.1753L2.81646 11.1889C2.56927 11.3314 2.35259 11.5213 2.1788 11.7476C2.00501 11.9739 1.87752 12.2322 1.80361 12.5078C1.7297 12.7834 1.71083 13.0709 1.74807 13.3538C1.7853 13.6367 1.87792 13.9095 2.02063 14.1566L2.41334 14.8368C2.55638 15.084 2.74681 15.3006 2.97371 15.4741C3.20061 15.6476 3.45953 15.7746 3.73561 15.8479C4.01169 15.9211 4.29952 15.9392 4.58259 15.901C4.86566 15.8628 5.13841 15.7691 5.38521 15.6253L5.40813 15.6118C6.01714 16.1109 6.70362 16.507 7.44042 16.7847C7.44028 17.0701 7.49635 17.3526 7.60542 17.6163C7.7145 17.88 7.87444 18.1196 8.07612 18.3215C8.27779 18.5234 8.51726 18.6835 8.78084 18.7929C9.04441 18.9022 9.32694 18.9585 9.61229 18.9587H10.3873C10.9632 18.9584 11.5155 18.7295 11.9227 18.3222C12.33 17.915 12.5589 17.3627 12.5592 16.7868C13.3043 16.5064 13.9981 16.1048 14.6123 15.5982L14.6269 15.6066C15.126 15.8945 15.719 15.9724 16.2755 15.8232C16.8321 15.6739 17.3065 15.3098 17.5946 14.8107L17.9623 14.1732C18.2503 13.6743 18.3284 13.0813 18.1793 12.5248C18.0303 11.9683 17.6663 11.4938 17.1675 11.2055L17.1519 11.1972C17.2194 10.8021 17.2542 10.4022 17.256 10.0014C17.2559 9.60948 17.2239 9.21826 17.1602 8.83158L17.1831 8.81803C17.4303 8.6755 17.647 8.48565 17.8208 8.25934C17.9946 8.03303 18.1221 7.77469 18.196 7.49908C18.2699 7.22348 18.2888 6.93601 18.2515 6.65311C18.2143 6.37021 18.1217 6.09742 17.979 5.85033L17.5863 5.17012C17.4437 4.92236 17.2537 4.70518 17.027 4.53106C16.8003 4.35693 16.5415 4.22928 16.2654 4.15544C15.9893 4.08159 15.7013 4.063 15.418 4.10074C15.1346 4.13847 14.8616 4.23179 14.6144 4.37533L14.5915 4.38887C13.9824 3.8898 13.296 3.4936 12.5592 3.21595C12.5593 2.9306 12.5032 2.64801 12.3942 2.38433C12.2851 2.12065 12.1252 1.88103 11.9235 1.67916C11.7218 1.47729 11.4823 1.31712 11.2188 1.20779C10.9552 1.09847 10.6726 1.04213 10.3873 1.04199Z"
                                            fill="#666666"></path>
                                        <path
                                            d="M9.99984 7.91699C10.4119 7.91699 10.8147 8.03918 11.1573 8.2681C11.4999 8.49702 11.7669 8.82239 11.9246 9.20307C12.0823 9.58375 12.1235 10.0026 12.0431 10.4068C11.9628 10.8109 11.7643 11.1821 11.473 11.4735C11.1816 11.7648 10.8104 11.9632 10.4063 12.0436C10.0021 12.124 9.58326 12.0828 9.20258 11.9251C8.8219 11.7674 8.49653 11.5004 8.26761 11.1578C8.03869 10.8152 7.91651 10.4124 7.91651 10.0003C7.91651 9.44779 8.136 8.91789 8.5267 8.52719C8.9174 8.13649 9.4473 7.91699 9.99984 7.91699ZM9.99984 6.66699C9.34057 6.66699 8.6961 6.86249 8.14794 7.22876C7.59977 7.59503 7.17253 8.11563 6.92024 8.72471C6.66795 9.3338 6.60194 10.004 6.73055 10.6506C6.85917 11.2972 7.17664 11.8912 7.64282 12.3573C8.10899 12.8235 8.70293 13.141 9.34954 13.2696C9.99614 13.3982 10.6664 13.3322 11.2754 13.0799C11.8845 12.8276 12.4051 12.4004 12.7714 11.8522C13.1377 11.3041 13.3332 10.6596 13.3332 10.0003C13.3332 9.11627 12.982 8.26842 12.3569 7.6433C11.7317 7.01818 10.8839 6.66699 9.99984 6.66699Z"
                                            fill="#666666"></path>
                                    </svg><span class="ml-1 text-gray-6">设置</span></div>
                                <div class="flex"><span class="immersive-translate-no-select text-sm text-gray-c2"
                                        style="cursor: pointer;">1.22.4</span></div>
                                <div class="more-container"><select id="more-select" autocomplete="off"
                                        class="min-select  text-gray-6 more" style="max-width: 48px;">
                                        <option value="DROP_DOWN_DEFAULT_VALUE">更多</option>
                                        <option value="openInstruction">📙 使用说明</option>
                                        <option value="changeToOnlyTranslationMode">🔤 临时切换默认译文模式为仅显示译文</option>
                                        <option value="changeToTranslateTheWholePage">💀 切换为翻译所有区域</option>
                                        <option value="switchNavEnableTranslate">💪 关闭侧边栏翻译</option>
                                        <option value="translateToThePageEndImmediately">⚡ 立即翻译到页面底部</option>
                                        <option value="openEbookViewer">📘 阅读本地电子书</option>
                                        <option value="openEbookBuilder">📚 制作双语 EPUB 电子书</option>
                                        <option value="babelDOC">📕 BabelDOC 保留排版 PDF 翻译</option>
                                        <option value="translateLocalPdfFile">📁 翻译本地 PDF 文件</option>
                                        <option value="pdfProFile">❇️ AI 驱动的 PDF Pro 翻译</option>
                                        <option value="translateLocalHtmlFile">🌐 翻译 HTML/txt 文件</option>
                                        <option value="translateLocalSubtitleFile">📺 翻译本地字幕文件</option>
                                        <option value="enableFloatBall">⭕ 启用悬浮球</option>
                                        <option value="editTranslation">🖌️ 临时开启译文编辑</option>
                                        <option value="goPro">👑 免费试用 Pro 会员</option>
                                        <option value="cleanCache">🧹 清除缓存</option>
                                        <option value="webReport">💬 反馈当前页面翻译问题</option>
                                        <option value="storeReview">👍 去商店评价</option>
                                        <option value="about">❤️ 关于 - 反馈</option>
                                    </select></div>
                            </div>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
    </template></div>

</html>